background color exported - Javascript highcharts

Javascript examples for highcharts:Chart Color

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

Description

background color exported

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/* w  w  w.j a va 2s. co m*/
    var chartSeriesData = [],
        globalBackground;
    chartSeriesData.push({
        showInLegend: false,
        data: [200, 200, 200, 210, 220, 200, 200],
        fillColor: '#333',
        fillOpacity: 0.1,
        lineColor: '#333',
        marker: {
            enabled: false
        }
    });
    chartSeriesData.push({
        showInLegend: false,
        data: [150, 150, 150, 160, 170, 150, 150],
        fillColor: '#666',
        fillOpacity: 0.1,
        lineColor: '#666',
        marker: {
            enabled: false
        }
    });
    chartSeriesData.push({
        type: 'line',
        name: 'Values',
        lineColor: '#27a5f9',
        color: '#27a5f9',
        data: [180, 190, 176, 110, 100, 150, 180]
    });
    //add the toggle colorbands functionality to the first colorband
    chartSeriesData[0].showInLegend = true;
    chartSeriesData[0].name = 'Color Bands';
    chartSeriesData[0].events = {
        legendItemClick: function () {
            var doHide = true;
            if (!this.visible) {
                doHide = false;
            }
            var series = this.chart.series;
            for (var i = 0; i < series.length; i++) {
                if (series[i].type == 'area') {
                    if (doHide) {
                        series[i].hide();
                    } else {
                        series[i].show();
                    }
                }
            }
            if (doHide) {
                globalBackground = '#fff';
                this.chart.plotBackground.attr({
                    fill: '#fff'
                });
            } else {
                globalBackground = '#000';
                this.chart.plotBackground.attr({
                    fill: '#000'
                });
            }
            return false;
        }
    };
    var chartingOptions = {
        chart: {
            renderTo: 'container',
            type: 'area',
            plotBackgroundColor: '#000000'
        },
        exporting: {
            chartOptions: {
                chart: {
                    events: {
                        load: function () {
                            this.plotBackground.attr({
                                fill: globalBackground
                            });
                        }
                    }
                }
            }
        },
        series: chartSeriesData
    };
    chart = new Highcharts.Chart(chartingOptions);
});

      </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="height: 400px"></div>  
   </body>
</html>

Related Tutorials