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/
Related
I'm currently using a bar graph to display my data. In this div, my bar graph is sitting at 50% width. If the percentage of the bar is too large for the width, the text next to the bar that displays the percentage such as 10% shows in the bar graph itself. Which is fine, but with the using the same color css as the bar graph. In this situation it is hard to read the percentage.
I would like the percentage to use the same color as the bar graph but Is it possible to change the text to white only when this happens?
Here is a photo example:
Here is a code snippet of what i'm using to change the color of the text using plotOptions
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return ` <span style="color:${this.color};">${this.y} %</span>`;
}
}
}
},
Here is a link to my jsfiddle where the issue is re-created: https://jsfiddle.net/8g4uL0jm/22/
I think that a better idea will be to change the dataLabels color after their initializing, which gives us information about their positions.
Demo: https://jsfiddle.net/BlackLabel/af02bgs7/
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align !== "right") {
p.dataLabel.css({
color: p.color
})
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
actually I have an issue when I dispatch the event click on plot options of pie due to this generate a redraw of the chart. On my configuration I have this:
plotOptions: {
pie: {
events: { click: e => this.onClick(e) },
...
}
And below this function to emit the selected value:
// Catch the event on click a plot area.
onClick(event): void {
// Emit an event with information of selected plot.
this.plotSelected.emit(event);
}
And when I clicked on some point of the pie chart then all chart redraw return me all data for point in null values.
Hi I found a solution for my problem. Basically I'm using Higcharts with RxJs and assign as data an response for a BehaviorSubject directly. I change the way to assign the series data and my problem it's solved.
I would like to use the member function addPlotBand to add in a plotBand, and certain events like "mousemove, mouseout and click" to track the mouse. My question is that how to give the plotBand a border when mousemove in and get rid off the border when mouse move out of the plotBand?
thank you.
Plot bands are SVG paths in Highcharts. They're stored in axis' plotLinesAndBands array and can be accessed like this:
chart: {
events: {
load: function() {
var axis = this.xAxis[0];
console.log(axis.plotLinesAndBands[0].svgElem.element);
}
}
},
You can use Highcharts' SVGElement.attr() function together with onmouseover and onmouseout events of SVG elements to handle adding/removing borders for plot bands.
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
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 added a button to my chart to toggle (show/hide) the chart legend.
To hide my legend, I'm using in the callback function:
legend.group.hide()
Legend.box.hide()
This is working great, but when the legend is hidden, the legend pagination (legend paging navigation) remain visible on the chart.
How can I also hide the legend navigation?
You can hide legend with pagination like this:
$('.highcharts-legend').hide();
You need to refer to down/up/pager objects and hide them too.
$('#updateLegend').click(function (e) {
var legend = chart.legend;
if(legend.display) {
legend.group.hide();
legend.down.hide();
legend.up.hide();
legend.pager.hide();
legend.display = false;
} else {
legend.group.show();
legend.down.show();
legend.up.show();
legend.pager.show();
legend.display = true;
}
});
Example: http://jsfiddle.net/3Bh7b/124/