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>' ;
}
Related
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
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/
I am using HighCharts (horizontal) bar chart. This chart is very long down my page, which is fine, and so I was hoping to have the legend show up at the top and bottom of the chart. Is this possible? I cannot find in the API how to do this.
Thanks for any tips.
You can add extra legend by CSS / html styles.
http://jsfiddle.net/Ecrww/109/
$(chart.series).each(function(i, serie){
$('<li style="color: '+serie.color+'">'+serie.name+'</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend')
})
Try removing the following code
legend:
{
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
......
......
}
which makes the legend to default position
I also got it and found this way to solve it
try adding these code in options:
chart: {
marginTop:-10//for top position
},
hope it helps you
I have a custom chart here
I have set label property as
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
},
align:'center',
x:150
}
I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.
what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.
Here is the way I found it.
Instead of using static values,
I used useHTML, and positioned labels by CSS styles.
labels: {
useHTML:true,
formatter: function() {
return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
}
}
Simple example here