Need to apply background color to each legend text highchart

Question

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',
            layout: 'horizontal',
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            x: 60,
            y: 1,
            shadow: false, 
            border: 0, 
            borderRadius: 0, 
            borderWidth: 0
        },

But No luck As you can see I have to achieve 1. background colors to be applied to text . 2. And the text should be appended with 'BY TIME'.

Fiddle Demo

Hope you guys help me, please ask if in need to more information.

Answer 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;
}
#legend a {
    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: 0 5px;
}
.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