CODEWITHSUNDEEP
google-sheetshighcharts
The Jakester
The Jakester

Reputation: 730

Highcharts: Datalabels outside when unsufficient space inside, using Google spreadsheets

I am making bar charts using Highcharts and Google spreadsheets. I want to place the datalabels inside the bars, but sometimes the value is so small that the label won't fit nicely inside the bar, so in these cases, I want to place them outside of the bar. I know this can be done, as shown here: https://jsfiddle.net/o3cujptj/

But when I try to use this method with my chart, that uses Google sheets to get its data, it doesn't work, as chart.series[0].data returns empty. How can I make this work?

My js fiddle : https://jsfiddle.net/jmunger/sLk8nmo6/2/

        const chart = Highcharts.chart('container', {
        plotOptions: {
                bar: {
                    dataLabels: {
                        x: -5,
                        align: 'right',
                        style: {
                            textOutline: 0
                        },
                        shadow: false,
                        borderWidth: 0,
                        inside: true,
                        enabled: true,
                        pointFormatter: function() {
                            return Highcharts.numberFormat(this.point.y, 0);
                        },
                        //format: 'n = {point.label}'
                    }
                }
            },
         chart: {
         events: {
          load: function() {
                    const chart = this,
              points = chart.series[0].data,
              options = {
                dataLabels: {
                  inside: false,
                  style: {
                    color: 'black'
                  }
                }
              };

            points.forEach(function(point) {
              if (point.shapeArgs.height < 30) {
                point.update(options, false);
              }
            });

            chart.redraw();
          }
        }
      },
          data: {
                googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
                googleSpreadsheetWorksheet: 3,
                endColumn: 3,
                seriesMapping: [{
                    color: 2,
                    label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
                }],
            complete: function (options) {
              //?? anything to do here?
            }
            },
      series: [{
        dataLabels: {
          inside: true,
          enabled: true,
          style: {
            color: 'white'
          }
        },

        type: 'bar'
      }]
    });

    Option 2: Or upload your JavaScript file

    Indentation level:

    Brace style:

    BEAUTIFY JAVASCRIPT  BEAUTIFY JAVASCRIPT IN NEW WINDOW
    Beautified JavaScript:
    const chart = Highcharts.chart('container', {
        plotOptions: {
            bar: {
                dataLabels: {
                    x: -5,
                    align: 'right',
                    style: {
                        textOutline: 0
                    },
                    shadow: false,
                    borderWidth: 0,
                    inside: true,
                    enabled: true,
                    pointFormatter: function () {
                        return Highcharts.numberFormat(this.point.y, 0);
                    },
                    //format: 'n = {point.label}'
                }
            }
        },
        chart: {
            events: {
                load: function () {
                    const chart = this,
                        points = chart.series[0].data,
                        options = {
                            dataLabels: {
                                inside: false,
                                style: {
                                    color: 'black'
                                }
                            }
                        };

                    points.forEach(function (point) {
                        if (point.shapeArgs.height < 30) {
                            point.update(options, false);
                        }
                    });

                    chart.redraw();
                }
            }
        },
        data: {
            googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
            googleSpreadsheetWorksheet: 3,
            endColumn: 3,
            seriesMapping: [{
                color: 2,
                label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
            }],
            complete: function (options) {
                //?? anything to do here?
            }
        },
        series: [{
            dataLabels: {
                inside: true,
                enabled: true,
                style: {
                    color: 'white'
                }
            },

            type: 'bar'
        }]
    });

Upvotes: 1

Views: 827

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

The load event is fired when the chart is finished loading - not data.

You can use redraw or render event, which are called after data is loaded.

let allowChartUpdate = true;
const chart = Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        const chart = this,
          points = chart.series[0].points,
          options = {...};

        if (points.length && allowChartUpdate) {
          allowChartUpdate = false;
          points.forEach(function(point) {
            if (point.shapeArgs.height < 30) {
              point.update(options, false);
            }
          });

          chart.redraw();
        }
      }
    }
  },
  ...
});

Live demo: https://jsfiddle.net/BlackLabel/tn98gwmj/

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

Upvotes: 2

Related Questions