CODEWITHSUNDEEP
csshighchartscustom-font
Mahdi
Mahdi

Reputation: 9417

Highcharts styling, Legend & custom fonts

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 and itemMarginBottom and itemMarginTop 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:

enter image description here

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:

enter image description here

Upvotes: 2

Views: 30647

Answers (1)

Hardik Mishra
Hardik Mishra

Reputation: 14887

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 :

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/

Upvotes: 5

Related Questions