show xrange labels if they fit the box in xrange chart - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

show xrange labels if they fit the box in xrange 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"> 
      <style id="compiled-css" type="text/css">

#container {//from  w  w w .ja va 2  s  .  c om
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/xrange.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        events: {
            render: function() {
                var points = this.series[0].points;
                Highcharts.each(points, function(point) {
                    var label = point.dataLabel;
                    if (point.shapeArgs.width < label.width) {
                        if (label.visibility !== 'hidden') {
                            label.hide();
                        }
                    } else {
                        if (label.visibility === 'hidden') {
                            label.show();
                        }
                    }
                });
            }
        }
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Idea', 'Prototyping', 'Development', 'Testing', 'Playtime'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 4
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 11),
            y: 3
        }, {
            x: Date.UTC(2014, 11, 11),
            x2: Date.UTC(2014, 11, 12),
            y: 3
        }, {
            x: Date.UTC(2014, 11, 12),
            x2: Date.UTC(2014, 11, 13),
            y: 3
        }, {
            x: Date.UTC(2014, 11, 13),
            x2: Date.UTC(2014, 11, 14),
            y: 3
        }, {
            x: Date.UTC(2014, 11, 14),
            x2: Date.UTC(2014, 11, 15),
            y: 3
        }],
        dataLabels: {
            enabled: true,
            inside: true,
            formatter: function() {
                return 'This is a label that should'
            },
        }
    }]
});

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

Related Tutorials