score:-1

yes. highcharts has a piece of documentation titled style by css which details how to do this.

by the look if it, you'll want to do something like:

.highcharts-legend-item {
  border: 1px solid tomato;
}

score:2

this seems trickier than i first thought. one thing that i think is a potential solution is adding usehtml: true to the legend and then styling using css and pseudo-elements.

with usehtml you could then style it using css like this:

.highcharts-legend-item {
padding: 1em;
}

.highcharts-legend-item > span {
position: relative;
overflow: visible!important;
}

.highcharts-legend-item > span:after {
content: "";
position: absolute;
width: 110%;
border: 2px solid #ddd;
padding: 1em 1em 0.5em;
top: -2px;
left: -25px;
border-radius: 10px;
}

please see this js fiddle for an example.

i'm sure you'll need to adjust the styling but it should be a start.

hope this helps.


Related Query

More Query from same tag