JSFiddle - React, Tailwind, and code Playground

by Anil Vangari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {"title":{"floating":false,"text":""},"xAxis":{"categories":["1 Mo","3 Mo","FYTD","1 Year","3 Years","5 Years","10 Years"],"title":{"text":null,"style":{}},"dateTimeLabelFormats":{},"labels":{"enabled":true,"style":{"fontWeight":"bold","color":"#000000"},"autoRotation":[-45]},"lineColor":"#888888","lineWidth":1.0,"tickWidth":1.0},"yAxis":{"title":{"text":null,"style":{}},"dateTimeLabelFormats":{},"labels":{"enabled":true,"style":{"fontWeight":"bold","color":"#000000"},"format":"{value:.0f}%","autoRotation":[-45]},"lineColor":"#888888","lineWidth":1.0},"series":[{"name":"Endowment","data":[0.0,0.0,0.0,0.0,5.963061,9.408788,5.934818],"color":"#C00000","showInLegend":true},{"name":"Liquid Policy Benchmark","data":[0.0,0.0,0.0,0.0,5.704484,9.13859,5.626081],"color":"#001F5F","showInLegend":true}],"chart":{"type":"column","height":200,"width":1000},"credits":false,"plotOptions":{"series":{"lineWidth":0.0},"bar":{"borderColor":"transparent","dataLabels":{"enabled":false}},"column":{"borderColor":"transparent","dataLabels":{"enabled":true,"format":"{y:0.2f}%"}},"pie":{"dataLabels":{"style":{}}}},"legend":{"layout":"horizontal","align":"center","verticalAlign":"top","floating":true}});