My Highcharts heatmap currently appears like this: https://i.sstatic.net/MCQ5T.png
Is there a method to include a border below the y-axis labels for it to resemble this design?
https://i.sstatic.net/G5gT4.png
Initially, I considered using the formatter() function and applying styling to the labels with a bottom border. However, when using formatter, the labels do not align properly with the heatmap and appear slightly displaced. Using margin or offset adjustments will not suffice as we have varying numbers of y-axis labels for different purposes. https://i.sstatic.net/LpW4Z.png
This is the code snippet I am experimenting with:
yAxis: {
min: 0,
max: caregap_nm.length - 1,
categories: ['APPLES', 'ORANGES', 'PEARS', 'GUAVA', 'GRAPES', 'MELONS'],
reversed: true,
title: {
align: 'high',
offset: 0,
text: '',
rotation: 0,
y: -20,
x: -25,
style: {
fontSize: '16px',
fontWeight: 600,
},
},
labels: {
useHTML: true,
align: 'left',
x: -100,
style: {
fontSize: '14px',
fontWeight: 400,
},
formatter() {
return `<div class="cg-y-labels"><span>${this.value}</span></div>`;
},
},
},