CODEWITHSUNDEEP
javascriptjqueryhighcharts
Josef Habr
Josef Habr

Reputation: 314

Hide legend for zero values

I found very challenging to show two graphs next to each other, so that the two chart areas shall be of equal length.

But as there's even a gap in some legends, I suppose I could just supply zeros or null as values in my (sorry, CSV) data, and then hide the corresponding legends. I tried legendFormatter, which could hide the text but didn't hide the colour square.

And by hiding, I mean leaving blank space in place of null values.

Picture of desired result

Could you please help? I'm quite new to jQuery.

Firefox 40
IE  20
Chrome  15
Edge    10
Safari  5
null    0
Other   7
Text browsers   3

This fiddle is a start. I hided the legends with some correction fluid.

http://jsfiddle.net/3zqeqq38/

Upvotes: 0

Views: 1161

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can wrap Legend.prototype.renderItem method, and there decide whether legend item should or not, be visible. Snippet:

(function(H) {
  H.wrap(H.Legend.prototype, 'renderItem', function (p, item) {
    p.call(this, item);

    if(item.y === 0) {
      item.legendGroup.hide();
    } else {
      item.legendGroup.show();
    }
  });
})(Highcharts)

Demo: http://jsfiddle.net/e48xa51L/

Upvotes: 1

ak_
ak_

Reputation: 2815

You should be able to strip those values from your <pre> tags. Something like this should work:

$('#chart-sectors-csv').text($('#chart-sectors-csv').text().replace(/null(.*)0/g,""));

$('#chart-drivers-csv').text($('#chart-drivers-csv').text().replace(/null(.*)0/g,""));

That will remove the values, you might still want to do some formatting for chart size.

You can see it working here: http://jsfiddle.net/igor_9000/v0yyajsj/4/

Hope that helps!

Upvotes: 0

Related Questions