combination area and bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

combination area and bar chart

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://code.jquery.com/jquery-git.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container1"></div> 
      <script type="text/javascript">
c2chart3=Highcharts.chart("container1", {
    colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
    chart: {//from   ww  w  .  ja v a  2s.  c  o m
        type: 'bar',
        backgroundColor: 'rgba(0,0,0,0.7)',
         style: {
                    color: '#FFF',
                    fontSize: '9px',
                    fontFamily: 'MP'
                },
    },
    title: {
        text: ''
    },
    xAxis: {
        title: {
            text: null
        }
        ,
        gridLineWidth:0,
            lineWidth:0,
            tickWidth: 0,
            title: {
                text: ''
            },
            labels: {
                style: {
                    color: '#FFF',
                    fontSize: '9px',
                    fontFamily: 'MP'
                },
                formatter: function(){
                     return ""
                }
            },
    },
    yAxis: {
            plotBands: [{
           color: 'tomato',
           from: -1000000,
          to: -1250000
        }],
        gridLineColor: '#fff',
            gridLineWidth: 0,
            lineWidth:0,
             plotLines: [{
                color: '#fff',
                width: 1,
                value: 0
            }],
        title: {
            text: '',
            align: 'high'
        },
            title: {
                text: ''
            },
            labels: {
                style: {
                    color: '#FFF',
                    fontSize: '9px'
                },
            },
    },
    tooltip: { enabled: false },
    credits: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
        style: {
                    textOutline: false,
                    color:'#fff',
                }
            }
        },
        series: {
            colorByPoint: true,
            pointWidth: 1,
            borderWidth:0,
            dataLabels: {
                enabled: true,
                formatter: function(){
                }
            }
        }
    },
    legend: {
            enabled: false
        },
    credits: {
        enabled: false
    },
    series: [
          {
                data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
          }]
});

      </script>  
   </body>
</html>

Related Tutorials