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.Tooltip.prototype.hide = function () {};
/* Highcharts.addEvent(Highcharts.Axis, 'afterDrawCrosshair', function(event) {
    if (this.cross) {
      $(this.cross.element).detach().insertAfter(this.chart.series[0].group.element);

    }
  }); */
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 : {
               visible: false
            },
    xAxis: {
    
    crosshair:{"width": 1, color: 'black'},
    allowDecimals: false,
    tickPositions: ['2 months', '4 months', '6 months', '8 months', '10 months', '12 months', '14 months', '16 months', '18 months', '20 months', '22 months', '24 months'],
        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,
        ...