I am trying to customize the band names in highcharts graph in angular. The following is the code snippet for the same. But it is returning undefined for the band name.
Here is the working code
Below is the code snippet for band plotting
{
name: 'Band',
type: 'area',
data: [{
x: currentlyAchievableChartData.bar_graph_min,
y: 2
}, {
x: currentlyAchievableChartData.bar_graph_max,
y: 2
}, {
x: currentlyAchievableChartData.bar_graph_max,
y: -2
}, {
x: currentlyAchievableChartData.bar_graph_min,
y: -2
}],
color: 'rgba(192,192,192,0.5)', // set the band color to transparent grey
fillOpacity: 1, // set the opacity of the band fill to 1
lineWidth: 0, // hide the line connecting the band points
borderRadius: 10 // set the corner radius of the band to 10 pixels
},
In this example, you can see a band is plotted as bar_graph_min to bar_graph_max. and the tooltip is showing the value starting as Band:224000 and ending as Band:313600. Instead of this, I need to show it as
Band Start:22400
and
End Start:313600
as tooltips. Also, it should show in the line passing through the center of the band. Currently, it is showing in the corners.
You can add name
property to the first series data and adapt the tooltip formatter. Also, set findNearestPointBy
to 'xy'
to show a tooltip in all the corners.
Highcharts.chart('container', {
...,
tooltip: {
formatter: function() {
if (['Propery Price', 'Band'].includes(this.series.name)) {
return this.point.name + ': ' + this.x;
} else
return this.series.name + ': ' + this.x;
}
},
series: [{
name: 'Band',
type: 'area',
findNearestPointBy: 'xy',
data: [{
x: currentlyAchievableChartData.bar_graph_min,
y: 2,
name: 'Band Start'
}, {
x: currentlyAchievableChartData.bar_graph_max,
y: 2,
name: 'Band End'
}, {
x: currentlyAchievableChartData.bar_graph_max,
y: -2,
name: 'Band Start'
}, {
x: currentlyAchievableChartData.bar_graph_min,
y: -2,
name: 'Band End'
}],
...
},
{
name: 'Propery Price',
...
},
{
name: 'Estimated Achievable Property Value - Med',
...
}
]
});
Live demo: https://jsfiddle.net/BlackLabel/ugsqoxc5/
API Reference: https://api.highcharts.com/highcharts/series.area.findNearestPointBy