JSFiddle - React, Tailwind, and code Playground
by Heena Mahour
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id='aumViz' style="height: 270px;width:100%;"></div>
JavaScript
var sum = 950013516 + 2298268631;
var seriesData = [{"name":"filler","type":"column","yAxis":0,"color":"#e6e6e6","showInLegend":false,"enableMouseTracking":false,"data":[950013516,866591334,840408915,793724926,762668082,781211834,295298378]},{"name":"AUM","type":"column","yAxis":0,"data":[2298268631,2381690813,2407873232,2454557221,2485614065,2467070313,2952983769]},{"name":"Gross Return","type":"spline","yAxis":1,"data":[-0.59,4.393704435497936,5.860488049635282,10.407451338341534,11.354290390953924,8.42515981282812,7.7287638666475145],"color":"#006442","negativeColor":"#D91E18"},{"name":"Net Return","type":"spline","yAxis":1,"dashStyle":"shortdot","data":[-0.61,3.701712808704438,5.091540314956311,8.858847955581318,9.694438071033428,7.421955959574644],"color":"#000000","negativeColor":"#6d4450"}],
xAxisData = ["Jan","F","M","A","M","J","Jun"],
scaleMax = 3248282147
// tickInterval = //,
// max =
$('#aumViz').highcharts({
chart: {
alignTicks: false
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: [{
categories: xAxisData,
tickLength: 0,
maxPadding: 0,
endOnTick: false,
startOnTick: false,
minorTickLength: 0
}],
yAxis: [{ // Primary yAxis
// max: sum,
startOnTick: false,
endOnTick: false,
labels: {
formatter: function () {
return this.value;
// return numeral(this.value).format('0.0 a').toLocaleUpperCase();
},
...