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
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 am attempting to the css color of my legend for my treemap layout.
In my treemap legend I am only displaying the parent's name and color. I would like to do the same but make the parent's name the same color.
For example: low display in blue text, med-low display in green text; while still displaying the color circle next to it.
i've attempted this by using the legend labelFormatter function but it seems to have no affect on my legend.
here is a code snippet of what I tried:
legend: {
labelFormatter: function () {
return `<span style="color:${this.parent.color};"> <br/> ${this.parent.name}</span>`;
}
},
Here is a jsfiddle link to the chart :
The legend object cannot be nested in the chart object config.
Rendering the as a span needs to set the legend.useHTML to true, which allows rendering the legend label as outstanding HTML element which could be styled in this way.
Demo: https://jsfiddle.net/BlackLabel/dmy9uqbe/
legend: {
useHTML: true,
labelFormatter: function() {
return `<span style="color:${this.color};"> <br/> ${this.name}</span>`;
}
},
API: https://api.highcharts.com/highcharts/legend.useHTML
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
I need one help on high chart options,
How to remove the white colour around the percentage with in the pie chart options.
I have attached the image, please see that and help me for this issue.
Please click here
This can be done by modifying the textOutline style property like:
...
plotOptions: {
pie: {
datalabels: {
style: {
textOutline: false
}
}
}
},
...
I have a highcharts chart with a series of area plots and a line plot with the chart also having an initial background color. The chart has a way to toggle the area and background colors on and off by clicking in the legend (see working jsfiddle). Everything works fine, except for when you turn off the area/background color and try to export the chart. The export always shows the original background color.
http://jsfiddle.net/lamarant/BHkmw/
The code that changes the background color looks like this:
if (doHide) {
this.chart.plotBackground.attr({
fill: '#fff'
});
} else {
this.chart.plotBackground.attr({
fill: '#000'
});
}
Any ideas?
It is related with fact, that during export, chart is generated again, so not include dynamic options (like attr()). So you can set global variable, which will keep "current" background, and in exporting options (chartOptions) use load event, which will set correct background.
exporting: {
chartOptions: {
chart: {
events: {
load: function () {
this.plotBackground.attr({
fill: globalBackground
});
}
}
}
}
},
http://jsfiddle.net/BHkmw/9/