fillColor stacking in area chart - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

fillColor stacking in area chart

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-compat-git.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
$(function () {//from  w w  w  .j av a  2s  . co m
   var chartConfig = {
        chart: {
            renderTo: 'container',
            type: 'areaspline'
        },
        xAxis: {
            labels: {
                enabled: true
            },
            tickLength: 0,
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            max: 275
        },
        credits: {
            enabled: false
        },
        yAxis: {
            labels: {
                enabled: true
            },
            title: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            max: 200
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                //pointStart: 20,
                lineColor: '#E8D0D0',
                lineWidth: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0,
            enabled: false
        }
    };
    var series = [{
        data: [[85, 0], [155, 220],[265, 220]],
        lineColor: "#E8D0D0",
        fillColor: "#E8D0D0",
        showLegend: false
    }, {
        data: [[115, 0], [215, 220],[265, 220]],
        lineColor: "#D1A1A1",
        showLegend: false,
        fillColor: "#D1A1A1"
    }, {
        data: [[145, 0], [265, 220]],
        showLegend: false,
        lineColor: "#BB8977",
        fillColor: "#BB8977"
    }];
    chartConfig.series = series;
    var hChart = new Highcharts.Chart(chartConfig);
});
    });

      </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"></div>  
   </body>
</html>

Related Tutorials