Highcharts Demo

author(s): Torstein Hønsi

by kawaljeetdhesi

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    credits :{
               enabled: false},
            
    title: {
        text: 'Based on your responses, here is what you will save:<br><b>$9,999.99</b>'
    },
    yAxis : {
               title: {
                  text: 'Billions'
               }
            },
    xAxis: {
    allowDecimals: false,
        categories: ['2 months', '4 months', '6 months', '8 months', '10 months', '12 months', '14 months', '16 months', '18 months', '20 months', '22 months', '24 months'],
        tickmarkPlacement: 'off',
        title: {
            enabled: false
        }
    },
    tooltip: {
    		backgroundColor: '#F5F5F5',
        borderRadius: 10,
        shared: true,
        valuePrefix: '$',
    		positioner: function () {
            return { x: 80, y: 50 };
        },
         formatter: function () {
        		var sum = 0,s;
            $.each(this.points, function () {
              sum+= this.y;
            });
            s = '<span>After ' + this.x + ' you will have:</span><br/><b>Total Savings $' + sum;
            $.each(this.points, function () {
                s += '<br/>' + this.series.name + ': $' +
                    this.y;
              sum+= this.y;
              
            });
            return s;
        },
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        },
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        name: 'Debit Transfers',
        color: '#E68823',
         "marker": {
                "symbol": "circle"
            },
        data: [102, 235, 309, 447,...