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
Related
I am trying to implement accessibility(keyboard navigation on hover state). When I hover the plot band I can see the tooltip values as given by moverover event. But when I tab into it I can see that the borders are highlighted but no data of hover state(ie.the tooltip) is shown. I have attached fiddle for the same.
events: {
mouseover() {
/* Show usage number on hover for first plot band */
this.label.element.innerHTML = 'RED'
},
mouseout() {
this.label.element.innerHTML = '';
}
}
PS: I have even added zIndex to the plotbands and fill-opacity:0 for the series.
Any help?
https://jsfiddle.net/Delfin_/bad9hfzt/85/
I've realized a drilldown of mappies (with display of mini charts when clicking on the region) and it works very well.
I have a small problem :
on the higher level, when the mouse is over the region, informations are displayed in the tooltip (and if I clic, a mini chart is displayed). If I hover the region name label, a tooltip shows 'click to drilldown'. Everything is OK on this level.
on the sublevel (when clicking on the region name from the higher level map), the map of the lower level is displayed and informations are displayed in the same way as for the upper level : mouse over the region -> informations are displayed in the tooltip (that is what I want). But when the mouse is over the name of the region, the tooltip with 'click to drilldown' is shown again and I would like that nothing appear at this level (because I can't drilldown again).
An example is here
clic on 'Auvergne-Rhône-Alpes' : the map of the french region is displayed. Now go over the label 'Ain' : I would like no tooltip to be displayed on this label (only the tooltip over the blue color around the label).
If I try to disable the tooltip, no more tooltip is displayed (nor the informations tooltip, neither 'clic to drilldown'). I want the informations tooltip continue to be displayed but not the 'clic to drilldown' at this level.
I tried to do a close behavior that I expect with this code but it fixed the position of the tooltip. I want the tooltip to continue to be displayed near the mouse cursor.
tooltip: {
useHTML: true,
pointFormat: '<span class="f32">'+level+'</span>',
positioner: function () {
var content = this.label.text.textStr;
if(content.indexOf('<span class="f32">2</span>')>0)
return { x: 0, y: -100 };
else
return { x: 0, y: 250};
}
},
Any ideas about that ?
Kind regards
I think that you should use the tooltip.formatter (not the tooltip config nested in the series config object) callback which allows setting displayed tooltip formats.
Demo: https://jsfiddle.net/BlackLabel/kg30con5/
tooltip: {
formatter() {
console.log(this)
if (this.series.mapTitle) {
var hoverVotes = this.hoverVotes; // Used by pie only
var libRegion = this.LIB_REGION;
if (libRegion == undefined) {
libRegion = this.point.properties.name;
}
return "<b>" + libRegion + "</b><br/>" +
"<hr/><b><i>Nb_Femmes : </b></i> " + unit_pre + Highcharts.numberFormat(this.point.value, mes_prec) + unit_suf +
"<br/><i>Click to display more informations</i>";
} else {
if (level === 1) {
return this.series.name
} else {
return false
}
}
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
I have an application where user can select a region by clicking. Then the map rewrites itself and zoomsTo() to the selected area. So far everything else works, but I haven't get any idea how to color the selected area programmatically. The area (or different statistics) may also be selected from a drop-down list, so I have to redraw the map in any case.
var mapChart=$('#mapcontainer').highcharts();
mapChart.get(jQuery( "#selected-region" ).val()).zoomTo();
mapChart.mapZoom(5);
I have tried things along the line:
mapChart.get(jQuery( "#selected-region" ).val()).color="rgb(255,0,0)";
but so far no breakthrough :/
Any ideas?
hank
Using jquery to select point is not the best solution. Highcharts provides point events like click where you have an access to clicked point instance, or you can select a point using the chart.get() method by point id.
To change the selected area color you have to define color property when a point (area) is selected:
series: [{
states: {
select: {
color: '#a4edba'
}
}
}]
Now you have to invoke select() method on the clicked or selected point, as well as you invoked zoomTo() method:
series: [{
point: {
events: {
click: function() {
var point = this;
point.zoomTo();
point.select();
}
}
},
states: {
select: {
color: '#a4edba'
}
}
}]
});
Demo:
https://jsfiddle.net/wchmiel/yzco1023/
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/
I have a stock chart with the fixed tooltip like the one shown in the stock tooltip positioner example. Now I want to add some flags on the series. Each flag's tooltip should be adjacent to the flag when it is "mouse over", like the default positioning/format of a tooltip. Also, each flag's tooltip has its own text and should not affect the fixed tooltip when displayed (eg. the fixed tooltip would show the stock price and the flag tooltip would show some text associates with the flag)
Do you have any related sample code I can take a look at? thx!
This is not directly supported but possible to achieve, take a look: http://jsfiddle.net/hzYhQ/2/
1) Add custom property for a chart with mouseout/mouseover events for flags:
plotOptions: {
flags: {
events: {
mouseOver: function(){
this.chart.flagTooltip = true;
},
mouseOut: function(){
this.chart.flagTooltip = false;
}
}
}
}
2) Add checking where tooltip should be displayed according to that flag:
positioner: function (w,h,p) {
var x = 10,
y = 35;
if(this.chart.flagTooltip) {
x = p.plotX;
y = p.plotY;
}
return { x: x, y: y };
}