I am trying to hide specific legend items on my graph (http://api.highcharts.com/highcharts/legend). If I loop through the chart.legend.allItems and try to change a specific items visible property it does not effect the legend at all.
$.each(chart.legend.allItems, function() {
this.visible = false;
});
How can I hide a specific legend item on my graph ?
I think this is being made out to be more complex than it needs to be.
You can set showInLegend to false in your config options for the series.
If you need to do it programmatically, you can use series.update() to accomplish it dynamically.
Reference:
http://api.highcharts.com/highcharts/plotOptions.series.showInLegend
http://api.highcharts.com/highcharts/Series.update
I found other solution in this question
var item = chart.series[1];
//hide serie in the graph
item.hide();
item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();
EDIT:
Other solution for last version of highcharts:
$('#container').highcharts().series[1].update({ showInLegend: false });
You can do that with the load event - Highcharts Doc
chart: {
events: {
load: function() {
var myChart = this;
$.each(myChart.series, function(index, serie) {
if(index === 2 ) { // hide serie
serie.hide();
}
});
}
}
},
Here a fiddle
if you want to hide some labels you can add some css class to hide them according to some special feature of the series. I pass an example in which the series is hidden with empty data and also hide the label:
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].dataMax === 0) {
chart.series[i].hide();
}
}
$("#charContent").find('.highcharts-legend-item-hidden').each(function () {
$(this).addClass('hidden');
});
In the css:
.highcharts-legend-item-hidden.hidden {
display: none;
}
Maybe it's not a very clean solution but it works for me
Related
I have a chart like this, where I have 29 series in a legend field. And I want to make it look better, so my question is: how can I add custom multiple select instead of selection which is provided by highcharts?
Yes, it is possible. You have to set enabled legend property to false, add html select list and write your own function to switch between series.
function chose() {
let selected = mySelect.options[mySelect.selectedIndex].text;
chart.series.forEach((series) => {
if (selected === series.name) {
if (series.visible) {
series.hide();
} else {
series.show()
}
}
})
}
btn.addEventListener('click', () => {
chose()
})
Check this example: https://jsfiddle.net/Bastss/daL7nzjr/ . Also, check this Highcharts solution to customize legend when the chart has a lot of series: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/navigation/
Best regards!
How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/
I have two goals. First is to be able to disable the default dragging on the main chart, and using drag and multiple select on the columns. second I want to know if it is possible to also reflect this selection on the navigator bar under the main chart. Please advise.
Thanks
This is possible by using point.select() and chart.events.selection event. Here is a sample config:
chart: {
renderTo: 'container',
type: 'column',
panning: false,
zoomType: 'x',
events: {
selection: function (e) {
var xAxis = e.xAxis[0],
flag = false; // first selected point should deselect old ones
if(xAxis) {
$.each(this.series, function (i, series) {
$.each(series.points, function (j, point) {
if( point.x >= xAxis.min && point.x <= xAxis.max ) {
point.select(true, flag);
if (!flag) {
flag = !flag; // all other points should include previous points
}
}
});
});
}
return false; // prevent zoom
}
}
},
Demo: http://jsfiddle.net/ma50685a/4/
I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}