score:2
Accepted answer
The best way to add a custom element inside the legend is to use the legend.labelFormatter.
events: {
render() {
let chart = this,
legendAttr = chart.legend.box.getBBox(),
padding = 5;
chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
cursor: 'pointer',
}).css({
fontSize: 20
}).on(
"click",
function() {
alert('plus was clicked')
}
).add()
}
}
API References: https://api.highcharts.com/highcharts/legend.labelFormatter,
score:-1
I decided to just get rid of the title and add custom css to the top of it.
Source: stackoverflow.com
Related Articles
- Angular Highcharts Custom Legend Label In Area Chart
- Hide or Disable Legend or Label in the end Highcharts line
- Highcharts display label for pie chart using html table as data source
- Highcharts crosshair label is behind legend
- Add CSS to a specific series' legend label in Highcharts
- Highcharts series label legend in one line
- Highcharts - Should Is use data labels or annotation or something else and how?
- Not able to getting highcharts legend label in order
- Highcharts : Display static Y axis labels from array when series data is null , else auto generated label
- HighCharts Hide Series Name from the Legend
- How to modify highcharts legend item click event?
- Hiding a Highcharts series without using the legend
- Disable-Click on Legend in HighCharts Column Graph
- Highcharts - Change legend index order
- Fixed y-axis label width in Highcharts
- Highcharts legend font sizes
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Add series total to legend in Highcharts
- Highcharts - How to display legend symbol inside the tooltip
- Filtering legend of a Highcharts by only visible series
- How do I format x-axis label in highcharts
- Add tooltip to legend in highcharts when hovering
- Highcharts graph X-axis label for different date ranges
- Highcharts - Legend Positioning outside the chart
- How to align centre a custom label in highcharts
- Display legend items in two columns highcharts
- Highcharts TypeScript, y-axis label
- HighCharts Place Label on Bar
- Highcharts add legend on export
- Highcharts - Long multi-line y axis labels causing following label to be removed
- Dynamically high chart rendering not working
- Getting HighCharts to show fewer data points
- Is highcharts-more still needed (as of highcharts version 4.0.4)?
- Highcharts percentage of total for simple bar chart
- HighCharts: Possible to summarize series data and show in title?
- Stacked column not lining up with highcharts
- SVG tooltip z-index with html title
- I was trouble with tittle of the Highcharts
- Highcharts grouped columns of varying widths that fill the entire space automatically
- How to set datalabels as vertical in Highcharts
- Wrapping a HighChart in AngularJS
- How to create 2 axis and 2 yaxis in highchart
- Highcharts modify stacklabels dynamically
- Highcharts stacked bar negative / positive total
- How to place highcharter objects at same horizontal level using rmarkdown?
- Workers for phantomJs fail to start in a Docker container
- Animation end callback after adding points
- Drawing a regression line in Highcharts using mx + b
- Highcharts - Java exporting server in GWT app
- Redraw the pie chart in oval shape highcharts