Set chart background color and plot color - Javascript highcharts

Javascript examples for highcharts:Chart Color

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

Description

Set chart background color and plot color

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.highcharts.com/adapters/standalone-framework.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w w .  j av a 2s .c o  m*/
new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        type: 'column',
        backgroundColor: '#006698',
        plotBackgroundColor: '#006698',
        style: {
            fontSize: 12,
            fontFamily: 'Helvetica Neue, Arial, sans-serif'
        },
        height: 300,
        marginTop: 0,
        marginLeft: 100,
        marginRight: 30
    },
    legend: {
        backgroundColor:'rgba(255,255,255,.25)'
    },
    colors: ['#6621cc', '#ab33ff', '#d6a3ff'],
    xAxis: {
        categories: ['Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
        tickWidth: 0,
        lineColor:'#7ea8be',
        lineWidth:1,
        labels: {
            style: {
                color: '#fff'
            }
        }
    },
    yAxis: {
        tickLength:60,
        tickWidth:1,
        tickColor: '#7ea8be',
        gridLineColor: '#7ea8be',
        labels: {
            style: {
                color: '#fff'
            },
            y:-3,
            x:-50,
            align:'left'
        },
        showLastLabel: false,
        title: null
    },
    title: null,
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                style: {
                    color: '#fff'
                }
            }
        }
    },
    series: [{
        name: 'Data 1',
        data: [942, 930, 310, 543, 998]
    }, {
        name: 'Data 2',
        data: [549, 558, 568, 153, 889]
    }, {
        name: 'Data 3',
        data: [459, 53, 657, 369, 447]
    }]
});
    }

      </script> 
   </head> 
   <body> 
      <div id="chart"></div>  
   </body>
</html>

Related Tutorials