Basic column

author(s): Torstein Hønsi

by Rambabu Pudi

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A basic column chart compares rainfall values between four cities.
        Tokyo has the overall highest amount of rainfall, followed by New York.
        The chart is making use of the axis crosshair feature, to highlight
        months as they are hovered over.
    </p>
</figure>

JavaScript

Highcharts.chart('container', 

{"title":{"text":""},"xAxis":{"categories":["SEASON0","SEASON1","SEASON2","SEASON3"]},"yAxis":[{"title":{"text":"UNIT COST"},"opposite":false},{"title":{"text":"UNITS"},"opposite":false}],"series":[{"name":"UNIT COST/Live","type":"column","yAxis":0,"data":[{"y":47.38,"decimalPrecision":0,"x":0},{"y":47.0,"decimalPrecision":0,"x":0},{"y":47.0,"decimalPrecision":0,"x":0},{"y":47.0,"decimalPrecision":0,"x":0}],"zIndex":2},{"name":"UNITS/Live","type":"spline","yAxis":0,"data":[{"y":5000.0,"decimalPrecision":0,"x":0},{"y":6000.0,"decimalPrecision":0,"x":0},{"y":7000.0,"decimalPrecision":0,"x":0},{"y":8000.0,"decimalPrecision":0,"x":0}],"zIndex":3}],"numPlotItems":0,"chartStyles":{"title.xaxis.margin":16,"decimalSeparator":".","chart.shadow":false,"chart.plotBorderWidth":0,"yAxis.alternateGridColor":"#F7F7F7","tooltip.animation":false,"colors":["#007AB4","#C90A5A"],"chart.spacing":[16,16,16,16],"xAxis.gridLineWidth":1,"chart.backgroundColor":"#FFFFFF","chart.plotBorderThickness":0,"tooltip.shadow":true,"xAxis.gridLineColor":"#E9E9E9","legend.shadow":true,"chart.style.fontSize":12,"plotOptions.series.animation":false,"credits.enabled":false,"xAxis.alternateGridColor":"","legend.enabled":true,"yAxis.gridLineWidth":1,"chart.style.fontFamily":"Roboto, arial, sans-serif","label.rotation":false,"yAxis.gridLineColor":"#E3E3E3","thousandSeparator":",","title.yaxis.margin":16,"tooltip.backgroundColor":"#FFFFFF","legend.borderWidth":0,"chart.borderColor":"#545454"}

);