combine two column charts in a single chart? - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

combine two column charts in a single 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-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   ww  w  . j a v a2  s .  c o m
$(function () {
    $('#container').highcharts({
        chart: {
            alignTicks: false
        },
        title: {
            text: ""
        },
        yAxis: {
            min: 0,
            max: 1
        },
        xAxis: {
            min: 0,
            endOnTick: false,
            max: 9000
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                grouping: false
            }
        },
        series: [
        {
            data: [
            1],
            type: "column",
            pointPadding: 0.01,
            color: "red",
            pointInterval: 5000,
            pointRange: 5000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 0,
            minPointLength: 3
        }, {
            data: [
            0.5],
            type: "column",
            pointPadding: 0.01,
            color: "yellow",
            pointInterval: 10000,
            pointRange: 10000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 1,
            minPointLength: 3
        }]
    })
})
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials