minPointLength on columnrange - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

minPointLength on columnrange

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>columnrange datalabel issue</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {//from   ww  w.j  ava  2 s. c  o m
    window.chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'columnrange',
            inverted: true
        },
        xAxis: {
            labels: {
                enabled: false
            }
        },
        plotOptions: {
            series: {
                minPointLength: 10,
                dataLabels: {
                    enabled: true,
                },
            }
        },
        series: [{
            name: "Product A",
            data: [[-200, 200]]},
        {
            name: "Product B",
            data: [[-150, 150]]},
        {
            name: "Product C",
            data: [[-100, 100]]},
        {   name: "Small Data",
            data: [[0, 1]]}
                             ]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/master/highcharts.src.js"></script> 
      <script src="https://github.highcharts.com/master/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials