slesh slesh - 3 months ago 12
AngularJS Question

How make to fill space after column was hidden in column chart using highchart?

Is there way to fill space after one column was hidden by clicking on legend item?

<div id="container" style="height: 300px"></div>
<script src="http://code.highcharts.com/highcharts.src.js"></script>

var chart = new Highcharts.Chart({

chart: {
type: 'column',
renderTo: 'container'
},

"title":{
"text":"TITLE",
"align":"left"
},
"subtitle":{
"text":"Subtitle Text",
"align":"left",
"style":{
"paddingBottom":"20px"
}
},
"xAxis":{
"categories":[
"Category1",
"Category2",
"Category3",
"Category4",
"Category5"
],
"crosshair":true,
"title":{

},
"labels":{
"enabled":false,
"format":"{value}"
}
},
"yAxis":{
"min":0,
"title":{
"text":"Meters"
},
"labels":{
"format":"{value}"
}
},
"tooltip":{
"enabled":true,
"headerFormat":"<span style=\"font-size:10px\">{point.key}</span><br/>",
"shared":true,
"useHTML":true
},
"legend":{
"enabled":true,
"align":"left",
"useHTML":true
},
"plotOptions":{
"column":{
"pointPadding":0.2,
"borderWidth":0,
"dataLabels":{
"enabled":true,
"format":"{point.y:.2f} ",
"style":{
"textShadow":0
}
}
},
"series":{
"grouping":false
}
},
"series":[
{
"name":"Category1",
"data":[
{
"name":"Category1",
"y":45,
"x":0
}
]
},
{
"name":"Category2",
"data":[
{
"name":"Category2",
"y":43,
"x":1
}
]
},
{
"name":"Category3",
"data":[
{
"name":"Category3",
"y":43,
"x":2
}
]
},
{
"name":"Category4",
"data":[
{
"name":"Category4",
"y":42,
"x":3
}
]
},
{
"name":"Category5",
"data":[
{
"name":"Category5",
"y":42,
"x":4
}
]
},
{
"name":"",
"data":[
{

}
],
"visible":false,
"showInLegend":false,
"exporting":false
},
{
"name":"Bla bla bla",
"data":[
45,
43,
43,
42,
42
],
"showInLegend":false,
"visible":false,
"exporting":true
}
],
"exporting":{
"enabled":false,
"chartOptions":{
"legend":{
"enabled":true,
"maxHeight":null,
"itemStyle":{
"fontFamily":"Arial"
}
}
}
},
"loading":{
"style":{
"opacity":0.9
}
},
"drilldown":{
"drillUpButton":{
"theme":{
"style":{
"display":"none"
}
}
}
}
});


Here is live example.

When I click on first or last legend item, then chart are redrawing, but it doesn't happening when I clicked on a middle legend item? It's a bug or feature? And how I can change this behavior for middle legend items to they able also throw the event redrawing the chart?

Thanks advance

Answer

You could set and update breaks for xAxis to hide the empty space:

http://jsfiddle.net/a4vcye4p/1/

  events: {
    legendItemClick: function() {
      var series = this,
        seriesIndex = series._i,
        xAxis = series.xAxis,
        newBreaks = [];
      if (series.visible) {
        newBreaks = xAxis.options.breaks;
        newBreaks.push({
          from: seriesIndex,
          to: seriesIndex + 1,
          seriesIndex: seriesIndex
        });
      } else {
        Highcharts.each(xAxis.options.breaks, function(br) {
          if (br.seriesIndex !== seriesIndex) {
            newBreaks.push(br);
          }
        });
      }
      xAxis.update({
        breaks: newBreaks
      });
    }
  }