Highcharts styling, Legend & custom fonts
The Highchart documentation says that there is a property called lineHeight
but Its deprecated since Highcharts 2.1
The post of official Highcharts forum also confirms the same. So, Either you can hack source code to change the height according to your need or Try to correct item height with javascript after chart render.
Also, There is an attribute called itemStyle
which allows to set CSS for legend item.
e.g. paddingBottom: '10px'
Check the example :
Mahdi
Updated on July 09, 2022Comments
-
Mahdi almost 2 years
I have a problem with styling legend items in
Highcharts
, when applying a Custom Font to the legend items. Actually items are so close to each other anditemMarginBottom
anditemMarginTop
are not working.Here is part of my
Highcharts
code:legend: { enabled: true, y: 20, align: 'right', verticalAlign: 'top', margin: 30, width: 200, borderWidth: 0, itemMarginTop: 15, itemMarginBottom: 15, itemStyle: { color: '#000', fontFamily: 'MuseoS500' } },
And here is the legend's screenshot:
My Ugly Solution:
I solved that like below, but sadly hard-coded:
// it is for the text's in the legend, I'll start from 0 and will // increase by 10, so it's adding 10 pixels extra space to the next one var z = 0; // this is for tiny-lines near the texts in legend, they starts from 14 // and increasing by 14 also ... var p = 14; // loop through <text> tags, which are texts in the lgened $('.highcharts-legend > text').each( function (i) { // they have 'x' and 'y' attribute, I need to work on 'y' obviously y = parseInt($(this).attr('y')); // increasing 'y' value ... $(this).attr('y', y + z); // next element is <path>, the colorful lines ... $(this).next().attr('transform', 'translate(30,' + p + ')'); // increasing the values, for the next item in the loop ... z = z + 10; p = p + 10 + 14; });
I know that it's so stupid, but I couldn't solve that in any other ways, and I had to make them works somehow. I would be happy to hear your thoughts also ... :)
The new legends after the patch:
-
Ricardo Alvaro Lohmann over 11 yearsOr set
itemStyle.padding
to5
. -
Mahdi over 11 yearsThanks Hardik, as you can see I've already fix that, however you're right and thanks for the information! :)