Skip to content Skip to sidebar Skip to footer

How To Determine The Width Of Every Column Series Present In The Chart- Highhcarts

I have stackLabels that I have added in the x- axis, I have added a formatter function that will truncate the x-axis labels in order to fit into the chart size: something like this

Solution 1:

Try to use the dataLabels instead the stackLabels and use the below config:

events: {
    render() {
      const chart = this;

      chart.series.forEach(s => {
        s.points.forEach(p => {
          if (p.dataLabel && p.dataLabel.width > p.pointWidth || p.dataLabel && p.dataLabel.text.styles.textOverflow) {
            let dataLabel = p.dataLabel;
            dataLabel.css({
              width: p.pointWidth,
              textOverflow: 'ellipsis'
            })

            dataLabel.translate(p.barX - 5, chart.plotHeight)
          }
        })
      })
    }
  }

Demo: https://jsfiddle.net/BlackLabel/47e3msuk/

API: https://api.highcharts.com/class-reference/Highcharts.CSSObject#textOverflow

API: https://api.highcharts.com/highcharts/series.line.dataLabels.overflow

API: https://api.highcharts.com/highcharts/chart.events.render

Post a Comment for "How To Determine The Width Of Every Column Series Present In The Chart- Highhcarts"