column bar chart set up - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

column bar chart set up

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </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> 
      <script type="text/javascript">
Highcharts.chart('container',
  {//from   w w w . jav  a2s.c  om
                chart: {
                type: 'column',
                animation: {
                    duration: 1000
                },
                },
                legend: {
                    enabled: false
                },
             title: {
                text: 'Highchart'
                    },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    year: '%b'
                },
                title: {
                    text: 'Date'
                },
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Units'
                }
            },
            credits: false,
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
            },
    series: [
                    {
                    name: 'C1',
                        data: [
                                [Date.parse("04/26/2017" + " UTC"), 40],
                                [Date.parse("04/25/2017" + " UTC"), 143],
                                [Date.parse("04/24/2017" + " UTC"), 40],
                                [Date.parse("04/23/2017" + " UTC"), 30],
                                [Date.parse("04/22/2017" + " UTC"), 20],
                                [Date.parse("04/21/2017" + " UTC"), 20],
                        ].sort(function (a, b) { return a[0] - b[0]; })
                    },
                    {
                    name: 'C2',
                        data: [
                                [Date.parse("04/26/2017" + " UTC"), 10],
                                [Date.parse("04/25/2017" + " UTC"), 13],
                                [Date.parse("04/24/2017" + " UTC"), 20],
                                [Date.parse("04/23/2017" + " UTC"), 40],
                                [Date.parse("04/22/2017" + " UTC"), 10],
                                [Date.parse("04/21/2017" + " UTC"), 70],
                        ].sort(function (a, b) { return a[0] - b[0]; })
                    },
        ]
   });

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

Related Tutorials