Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    exporting: {
    		enabled: false,
    },
    legend: {
        enabled: false,
        reversed: false,
    },
    title: {
        text: false,
    },
    xAxis: {
        lineWidth: 0,
        gridLineColor: '#EDEDED',
        gridLineWidth: 0,
        tickLength: 1,
        tickPosition: 'inside',
        labels: {
            distance: 1,
        },
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    },
    yAxis: {
        min: 0,
        title: false,
        opposite: true,
        showFirstLabel: true,
        gridLineColor: '#efefef',
        gridLineDashStyle: 'shortdash',
        tickInterval: 1,
            
        labels: {
       
            enabled: true,
            style: {
            	color: '#919FB2',
            },
            formatter: function() {
            	if (this.isLast || this.isFirst) {
              	return this.value
              }
            }
        },
    },
    plotOptions: {
        series: {
            grouping: false,
            shadow: false,
            stacking: 'normal',
            borderWidth: 0,
        }
        
    },
    series: [{
        name: 'Saved',
        stack: 0,
        zIndex: 1,
        legendIndex: 2,
        data: [0.5, 0.75, 1.1, 0.2, 0.4]
    }, {
        name: 'Spent',
        stack: 0,
        zIndex: 1,
        legendIndex: 1,
        data: [3, 4, 4, 2, 5],
        tooltip: {
            pointFormatter: function() {
                console.log(this);
                return (
                    '<span style="color:' +
                    this.color +
                    '">\u25CF</span> ' + this.series.name +
                    ': <b>' +
                    Highcharts.correctFloat(this.high - this.low) +
                    '</b><br/>'
                );
            }
        }
    }]
});