I'm creating a chart where users have to decide between two hypothetical financial situations. In this chart, I have two categories, each with two columns, one for the good weather situation and one for the bad weather situation. See image below.
Now I want to render an icon inside of each column, representing the type of weather. I can't figure out how to get the x-position of each of these columns exactly.
chart.series[0].points[x].plotX seems to return the x position of the category, as the icons appear between the two columns.
Is there a way to get the actual columns position as opposed to the category position?
Chart config:
const chartConfig: Highcharts.Options = {
chart: {
type: 'column',
animation: isBlank(options?.enableAnimation)
? CrraQuestionGraphComponent.DEFAULT_ENABLE_ANIMATION
: options?.enableAnimation,
events: {
redraw: (function (component: any) {
return function () {
// Note: 'this' is a Highcharts.Chart object
return component.redrawChartEvent(this);
};
})(this),
},
},
title: null, // no generated chart title
credits: { enabled: false }, // no generated credits
legend: { enabled: false }, // no generated legend
tooltip: {
enabled: isBlank(options?.enableTooltip)
? CrraQuestionGraphComponent.DEFAULT_ENABLE_TOOLTIP
: options?.enableTooltip,
useHTML: true,
headerFormat: '',
formatter: (function (component: any) {
return function () {
// Note: 'this' is a Highcharts.Tooltip object
return component.formatTooltip(this);
};
})(this),
backgroundColor: null,
borderWidth: 0,
className: 'chart-tooltip',
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0, // disable border around the columns
borderRadius: '20%',
},
series: {
dataLabels: {
enabled: true,
formatter: (function (component: any) {
return function () {
// Note: 'this' is a Highcharts.Tooltip object
return formatLocaleCurrency(this.y, component.translate);
};
})(this),
className: 'data-label',
color: null,
borderWidth: 0,
zIndex: 10,
style: {
color: null,
textOutline: null,
},
},
turboThreshold: 0, // disable check on data
},
},
xAxis: {
lineWidth: 1,
tickLength: 0, // no tick marks for the x-axis
min: 0,
labels: {
useHTML: true,
},
},
yAxis: {
lineWidth: 1,
title: {
text: '',
},
},
};
In order to get the correct column position, you can refer to the point.shapeArgs.x value. Please note that you should also count in the chart.plotLeft value, and when there is more than one series, adjust the position with pointWidth.
chart: {
events: {
load() {
const r = this.renderer;
this.series.forEach((series) => {
series.points.forEach((point) => {
r.circle(
point.shapeArgs.x + this.plotLeft + point.shapeArgs.width / 2,
point.plotY,
10
).attr({
fill: 'red',
zIndex: 5
}).add();
});
});
}
}
},
series: [{
type: 'column',
data: [1, 2, 3]
}, {
type: 'column',
data: [2, 1, 5]
}]