CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highchartshighcharts-gantt
SixtyEight
SixtyEight

Reputation: 2490

How to render custom yAxis label on Highcharts Gantt with the 'custom' property?

I've got a Gantt chart:

enter image description here

And I want to use the series.gantt.custom object to set specific properties for each series on the yAxis.

From these properties I want to construct the yAxis labels.

My code:

Highcharts.ganttChart('container', {

  yAxis: {
    categories: ['1', '2'],
    labels: {
      formatter() {
       return this.value  
        /*  + this.chart.series[this.pos].custom.size */
      },
    }
  },
  series: [{
    groupPadding: 1,
    custom: {
      size: "small",
    },
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1,
      }
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    custom: {
      size: "large",
    },
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }]
});

this.chart.series[this.pos].custom.size it's the bit that is not working.

The labels should be 1 small and 2 large.

A fiddle

Upvotes: 0

Views: 321

Answers (1)

magdalena
magdalena

Reputation: 3695

You can reach this property through the series.options:

this.chart.series[this.pos].options.custom.size

Demo: https://jsfiddle.net/BlackLabel/gLkn9uqf/

Upvotes: 1

Related Questions