Stacked area charts make my series fading in and fading out - Javascript highcharts

Javascript examples for highcharts:Chart Series

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Series

Description

Stacked area charts make my series fading in and fading out

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//w w w.ja v a 2  s .  c  o m
    var yAxisLabels = [0, 20000, 40000, 60000, 80000, 100000, 120000];
    var xCategories = ['2016', '2020', '2024', '2028', '2032', '2036', '2040'];
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            },
            labels: {
                formatter: function() {
                    return xCategories[this.value];
                }
            },
            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0,
        },
        yAxis: {
            startOnTick: true,
            title: {
                enabled: false
            },
            tickPositioner: function() {
                return yAxisLabels;
            },
            labels: {
                formatter: function() {
                    return "? " + this.value;
                }
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1
            },
            series: {
                fillOpacity: 1
            }
        },
        series: [{
            name: 'test2',
            data: [0, 0, 0, 87905, 87905, 87905, 87905]
        }, {
            name: 'test3',
            data: [0, 0, 0, 14211, 14211, 14211, 14211]
        },{
            name: 'test1',
            data: [113864, 113864, 113864, 0, 0, 0, 0],
            color: 'rgba(0,0,0,1)'
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials