CODEWITHSUNDEEP
highcharts
user839631
user839631

Reputation: 1

Highcharts Bar - Display DataLabel at the right end of the plot

I need the dataLabels to be always displayed at the right end of bar chart irrespective of the data value. According to the Highcharts API, the dataLabel position is adjustable only relative of its current position. Is there a way to change the datalabel position relative to the chart area?

Upvotes: 0

Views: 1747

Answers (2)

ppotaczek
ppotaczek

Reputation: 39069

You can also position data labels in the render event:

events: {
  render: function() {
    var chart = this;

    chart.series.forEach(function(s) {
      s.points.forEach(function(p) {
        if (p.dataLabel) {
          p.dataLabel.attr({
            x: chart.plotWidth - p.dataLabel.width
          });
        }
      });
    });
  }
}

Live demo: http://jsfiddle.net/BlackLabel/yt1joqLr/1/

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

Upvotes: 4

Sphinxxx
Sphinxxx

Reputation: 13017

You're looking for something like this?

Highcharts bar chart with right-aligned dataLabels

If you make the labels HTML elements instead of SVG elements..

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            allowOverlap: true,
            //Labels are easier to move around if we switch from SVG to HTML:
            useHTML: true,
        }
    }
}

..it's quite easy to move them around using CSS:

.highcharts-data-labels.highcharts-bar-series {
    /* Stretch the labels container across the whole chart area: */
    right: 0;
}

.highcharts-label.highcharts-data-label,
.highcharts-label.highcharts-data-label span {
    /* Disable the default label placement.. */
    left: auto !important;
    /* ..and put them along the right side of the container */
    right: 8px;
}

https://jsfiddle.net/ncbedru8/

Upvotes: 2

Related Questions