Is it possible to add an item to the Highcharts legend?
I have added a custom marker at a specific point in my line chart and would like to explain to the user what this marker indicates, so ideally I would add this as an additional item to the legend area.
The easiest way is to add that custom marker as a separate series, instead of within the original series.
{
name: 'Special Point',
marker: { enabled: true },
data: [[4,9]]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/123/
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I have a chart that has been designed that I'm working on and I have a few questions.
First, can I remove the grid lines etc. from the grid and just show a stacked bar graph with no axis/ticks etc.
Here's a link to the designed graph: UI of simple stacked bar chart
Thanks!
You can simply hide both axes to achieve the desired result:
yAxis: {
visible: false
},
xAxis: {
visible: false
},
Live demo: http://jsfiddle.net/BlackLabel/gspgunzj/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
I have a simple chart with six data objects, three lines and three bubbles. Each line shares the name with its corresponding bubble. How can I join each pair so that I can have an onClick event on either series to make them disappear?
I'm also not sure why disabling the legend is overriden:
plotOptions: {
showLegend: false
}
JSfiddle
Have you seen this question? Maybe it can be useful to you.
But for hiding the legend I didn't find the showLegend property. To hide the legend there is a property of legend - enabled:
legend: {
enabled: false
}
Is it possible to display point markers on main chart but not display it on Navigator chart?
You can use:
marker: {
enabled: false
}
It is the default setting. See here.
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]