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.
Source: stackoverflow.com
Related Query
- Border around legend item in highcharts
- Click on Highcharts pie rendering border although legend item click is disabled
- How to modify highcharts legend item click event?
- Highcharts legend item hover event?
- Highcharts - Legend item padding
- Highcharts border around plot
- Highcharts legend title border not full width
- Set custom legend item symbol (or icon) in HIghcharts
- Highcharts angular Get Legend Item Status
- dynamically change fontWeight on a legend item Highcharts
- Auto focus on a legend item in highcharts
- Highcharts Legend item text alignment
- Hiding legend item box when using check box in Highcharts
- Highcharts hide legend item from Pie chart
- Is there any way to add border in highcharts legend text individually?
- Issues with custom border around Highcharts Stacked Bars and disabling hover effect
- Grey out item in Highcharts legend
- Highcharts - How to Make the legend item width half of the contianer?
- Highcharts : Info about clicked legend item pass to controller
- Highcharts pie on legenditemclick avoid slicing of pie but show animation on legend item
- HighCharts Hide Series Name from the Legend
- Hiding a Highcharts series without using the legend
- Disable-Click on Legend in HighCharts Column Graph
- Displaying percentage inside pie item for highcharts
- Highcharts - Change legend index order
- Highcharts legend font sizes
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Add series total to legend in Highcharts
- How can I remove the white border from HighCharts pie chart?
- Highcharts - How to display legend symbol inside the tooltip
More Query from same tag
- Stock Highcharts date format
- make highcharts graph with data in json format, with 4-element array
- httphandler cannot find axd of Highcharts
- highcharts treemap stack Uncaught RangeError : Maximum call stack size exceeded
- Highcharts Stacked bar chart with db value (Dynamic Data)
- Remove spaces between columns in HighChart
- tick interval is not working while applying tick interval its showing x and y both values
- How can i use Highstock rangeSelector get the yAxis Max_value and Min_Value
- HighcharteR multiple tooltips open with hideDelay
- How to display only one x-axis labels in Highcharts synchronized charts
- LINQ SQL Method not Filling Highcharts
- how to get additional information by clicking a data point on bubble chart from data
- highstock strange behavior scrollbar
- Highcharts: how to show more info in tooltip?
- How to make the regression line through the origin in highcharts
- How to make Highcharts color axis as thresholds instead of gradual?
- Highcharts xAxis values index
- Highcharts pie chart annotations are not centering
- highcharts legend color customization
- Create a highchart graphic using angular.js
- Can color of data label be different inside and outside of the bar in Highchart
- Color plots depending of value
- Spikes are not showing correctly in Highstock
- Click child in sunburst chart, drilldown into parent element
- Set Custom icon to context menu for multiple charts (Highcharts)
- Verify if Pie in Highcharts Pie charts is selected or deselected
- Highcharts: there are two columns after exporting XLS(excel),I want to add another column showing percentage
- How to design a yAxis plotline with our own CSS?
- Highstock - Comparison chart should be start with 0%
- Highcharts datalabels getting scrambled on drilldown