cssangularhighchartsheatmapaxis-labels

Adding a border to labels in Highchart Mapchart

currently my Highcharts heatmap looks like this: enter image description here

Is there any way to add a border below the y-axis labels so it looks something like this?

enter image description here

First I thought of trying to use formatter() function and give styling to the labels with border bottom . But on using formatter the labels are not staying in line with the heatmap and are showing a little above. using margin or offset will not help because we have dynamic number of y-axis labels for different purposes. enter image description here

Here is the code I am trying:

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>`;
      },
    },
  },
Solution

  • You can use yAxis ticks to that and to display only those under the labels, you can use the chart.events.renderer() callback function to remove the first tick:

    chart: {
  events: {
    render: function() {
      this.yAxis[0].ticks[-1].destroy();
    }
  }
},
yAxis: {
  tickWidth: 1,
  tickLength: 100
},

    Demo: https://jsfiddle.net/BlackLabel/5fdan8rL/
    API: https://api.highcharts.com/highcharts/chart.events.render
    https://api.highcharts.com/highcharts/yAxis.tickWidth
    https://api.highcharts.com/highcharts/yAxis.tickLength