maintain the same order of category labels when bar chart changes to column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

maintain the same order of category labels when bar chart changes to column 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">
$(function () {/*  ww w .  j a v  a 2  s. com*/
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Yes', 'No', 'Dont Care'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635 ]
        }]
    });
  $("#bar").click( function  (){
     var chart =  $('#container').highcharts();
    chart.inverted = true;
    chart.xAxis[0].update({}, false);
    chart.yAxis[0].update({}, false);
    chart.series[0].update({
        type: 'bar'
    });});
    $("#column").click(function (){
     var chart =  $('#container').highcharts();
    chart.inverted = false;
    chart.xAxis[0].update({}, true);
    chart.yAxis[0].update({}, true);
    chart.series[0].update({
        type: 'column'
    });
     });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> 
      <button id="bar">bar</button> 
      <button id="column">column</button>  
   </body>
</html>

Related Tutorials