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!
Related
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
is it possible to link/sync 2 chart data in 2 different type of charts to show tooltips at once?
for an example, i have a pie chart and a area chart.
The pie chart represents the percentage of a particular browser and the area chart shows the downloads per year for each browser.
What i need to do is if someone clicks or hovers on section of the pie the relevant line and the tooltip of the area chart should be highlighted...
so when someone clicks/hovers on firefox on the pie, the line relevant to the area should show and vice versa...
is this something possible with highcharts?
So far the work i have done is https://jsfiddle.net/livewirerules/a9tntdam/1/
One thing that i noticed is i have added the event in my area chart to show the color when the tooltip is hovered.
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
when i hover a line on the area chart and move to the pie chart, the background color of the tooltips are changed.
I am not sure what would you like to show in a tooltip when you hover on your pie. You have one point so its hard to show tooltip for whole series on another chart.
You can use mouseOver and mouseOut events callback functions for highlighting series (so they will look like on hover):
point: {
events: {
mouseOver: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('hover');
}
});
},
mouseOut: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('');
}
});
}
}
},
You can use tooltip.refresh(point) for refreshing tooltip on specific point:
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
var name = this.name;
Highcharts.each(chart.series[0].data, function(p) {
if (name === p.name) {
p.setState('hover');
chart.tooltip.refresh(p)
}
});
},
Here you can see an example how it can work:
http://jsfiddle.net/a9tntdam/4/
while using grouped category plugin,
$('.highcharts-axis-labels text, .highcharts-axis-labels span').click(function () {
console.log(this.textContent || this.innerText);
});
the above code snippet would give info about the clicked xaxis label, is there a way to ascertain the parent of the same?
i would like to get the parent as "Forecast" when i click "Footwear" in the above chart
You can use custom-events extenstion and then add click event on xAxis labels. Name of parent can be extracted from textStr value.
labels: {
events: {
click: function () {
alert(this.parent.label.textStr);
}
}
},
Example: http://jsfiddle.net/tAq9V/9/
using Highchart I'd like to select series by clicking on it and change its width on selection ( so we can see it is selected)
the thing is, the selection seems to work (it toggles the selected value displayed in console) but I can't figure out how I can set a lineWidth from the click event :
the example is working to select series :
line: {
events: {
click: function(event) {
this.select();
console.log( this.name+", selected : "+ this.selected);
return false;
}
}
}
I can also show / hide series, but how can I change the lineWidth ?
I managed to display the tooltip only for selected series, but I need those series to be more visible than the others.
I've tried to add a select state on the series as it works on markers but it doesn't seem to work for lines :
series: {
states: {
select: {
lineWidth: 10
}
},
...
}
Use setState instead.
this.setState(this.state === 'select' ? '' : 'select');
Demo
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
});
}
}