Need To Apply Background Color To Each Legend Text Highchart

As I stated in my question, I am looking to change my legend some like : FROM: TO I have tried this for background color: legend: { backgroundColor: '#CCC',

Solution 1:

As @Liarez says, you can't do what you want from highcharts API.

But you can use jquery to do exactly what you want:

add new buttons:

<div id="legend">
<a href="#"id="a1">CPM</a>

<a href="#"id="a2">IPMS</a>

<a href="#"id="a3">SPEND</a>

</div>

add style to customize them:

#legend {
    position:absolute;
    top: 30px;
    left: 200px;
    z-index: 99999;
    background: black;
}
#legenda {
    float: left;
    margin: 5px;
    text-decoration: none;
    color: black;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 05px;
}
.leg-clicked {
    color: #CCC!important;
}
#a1 {
    background: rgb(87, 188, 0);
}
#a2 {
    background: rgb(213, 156, 72);
}
#a3 {
    background: rgb(12, 170, 226);
}

and the trick here:

css:

.highcharts-legend{display: none;}

js:

$("#a1").click(function () {
    $('.highcharts-legend-item:nth-child(1)').click();
    $(this).toggleClass("leg-clicked");
});
$("#a2").click(function () {
    $('.highcharts-legend-item:nth-child(2)').click();
    $(this).toggleClass("leg-clicked");
});
$("#a3").click(function () {
    $('.highcharts-legend-item:nth-child(3)').click();
    $(this).toggleClass("leg-clicked");
});

so highchart's legend is invisible and our custom buttons are sending clicks to legend. It is trick of course, but all works.

Also you can add any css you want, images, another jquery effects to this buttons.

FIDDLE