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
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
Working on a project where Highcharts is used to display charts. However, I want the legend to have the same colour as the bullets.
Here is an image as reference:
I want the '0 - 2 sec' to be purple and the '3 - 5 sec' to be orange.
You can use the legend labelFormatter function to accomplish this.
legend: {
labelFormatter: function () {
return '<span style="color:'+this.color+';">'+this.name+'</span>';
}
}
Reference:
http://api.highcharts.com/highcharts#legend.labelFormatter
Example:
http://jsfiddle.net/jlbriggs/mcffqo1x/
when i set useHTML=true on pie datalabels the labels are not respond to mouse hover and not show tooltip
http://jsfiddle.net/wh4mw0o7/
$(function () {
$('#container').highcharts({
chart: {},
plotOptions: {
pie: {
dataLabels: {
useHTML:true, // <- THE PROBLEM !!!!!
}
}
},
series: [{
type: 'pie',
data: [
['AAA', 10],
['BBB', 20],
['CCC', 15]
]
}]
});
});
do some one know how to fix it ?
i use html in the labels(different sizing and colors so i must use html as label).
See the http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
and paragraph "The downsides are that it will always be laid out on top of all other SVG content, and that it is not rendered the same way in exported charts." It means that HTML elements are below SVG, which keeps events.
Related topic: https://github.com/highslide-software/highcharts.com/issues/2158
EDIT:
$.each(chart.series[0].data, function (i, d) {
$('.highcharts-data-labels div span').eq(i).mouseover(function (e) {
chart.tooltip.refresh(d);
});
});
Workaround: http://jsfiddle.net/wh4mw0o7/6/
As a solution you can call the covering of each part of your pie chart.
dataLabels: {
useHTML:true, // Make our labels HTML
formatter: function() { // Wrap the text of each label with a span tag
// Id of the span is equal to 'label-<Name of your label>'
return "<span id='label-" + this.point.name+ "'>" +
this.point.name + // And draw the label itself inside the span
"</span>";
}
}
Below the your chart options write event handlers:
// On the hover event of each label we can manually call the hover of
// each segment of your pie chart
$('#label-AAA').hover(
// When the mouse pointer enters the label, make it hovered and show its tooltip
function() {
// data[0] - AAA segment of the chart
mychart.series[0].data[0].setState('hover');
// Refresh the tooltip of this segment
mychart.tooltip.refresh(mychart.series[0].points[0]);
},
function() { // When the mouse pointer leaves the label
mychart.tooltip.hide();
});
For each label the code is same. The disadvantage of this approach is that you have to know all labels names in advance. Here is JSFiddle: http://jsfiddle.net/wh4mw0o7/4/
I have tried,borderWidth, borderColor. But did not able to find to just add border bottom to single item in legend.
Thanks in advance..!!!
Set useHTML and then use HTML tags with CSS in formatter.
if you only want to underline an item you can use labelFormatter like this:(http://jsfiddle.net/L4D5U/)
legend: {
labelFormatter: function() {
return '<div style="text-decoration: underline">'+this.name+'</div>' ;
}
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.