CODEWITHSUNDEEP
highcharts
Meysam Zarei
Meysam Zarei

Reputation: 439

How to show custom text inside of each point in highchart gantt?

I want to show a custom text for each Gantt bar inside of them, (actually totally the same as when the complete percent is shown on each bar).

I've tried some code like below but it doesn't work for my Gantt:

plotOptions: {
    series: {
         stacking: 'normal'
     },
     gantt: {
     dataLabels: {            
        formatter: function(){
        return this.point.name
      },
            enabled: true
        }
      }
    },

Upvotes: 0

Views: 663

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I tried your approach and it seems to work fine.

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

  plotOptions: {
    gantt: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          return this.point.name
        },
      },
    }
  },

You should be able to customize the formatted callback and display whatever you want as a dataLabel.

API: https://api.highcharts.com/gantt/plotOptions.gantt.dataLabels.formatter

EDIT:

You can add your custom text to the data and display it on the dataLabel.

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

Or you can render your own custom label: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Upvotes: 2

Related Questions