CODEWITHSUNDEEP
highcharts
Jimmy Genslinger
Jimmy Genslinger

Reputation: 607

Highcharts how do i keep space between series the same but increase space between categories?

I have a highcharts column chart, here is the jsFiddle for it. I want to keep the space between the series as it is -- really close to each other without touching. But I'd like to increase the space between the categories so that it's more distinguishable they are different categories. I've tried playing around with pointpadding and grouppadding but everything I've tried wants to increase/decrease the space between all the columns. Any ideas?

      plotOptions: {
        column: {
          borderRadius: 5,
          dataLabels: {
            enabled: true,
          },
          groupPadding: 0,
          pointWidth: 45,
        },
      },

Upvotes: 0

Views: 203

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

In Highcharts API we can read:

pointWidth: number

A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from the pointPadding and groupPadding.

Defaults to undefined.

So in this situation pointPadding and groupPadding can be not respected but you can create your own function for positioning the columns, for example:

    events: {
        render: function() {
            var series = this.series;
            if (redrawEnabled) {
                if (this.chartWidth > 600) {
                    if (this.options.plotOptions.column.grouping) {
                        redrawEnabled = false;

                        this.update({
                            plotOptions: {
                                column: {
                                    grouping: false
                                }
                            }
                        });

                        redrawEnabled = true;
                    }

                    series.forEach(function(s, i) {
                        s.points.forEach(function(p) {
                            if (i === 0) {
                                p.graphic.attr({
                                    translateX: 25
                                });

                                p.dataLabel.attr({
                                    translateX: p.dataLabel.translateX + 25
                                });

                            } else {
                                p.graphic.attr({
                                    translateX: -25
                                });

                                p.dataLabel.attr({
                                    translateX: p.dataLabel.translateX - 25
                                });
                            }
                        });
                    });
                } else {
                    if (!this.options.plotOptions.column.grouping) {
                        redrawEnabled = false;

                        this.update({
                            plotOptions: {
                                column: {
                                    grouping: true
                                }
                            }
                        });

                        redrawEnabled = true;
                    }
                }
            }

        }
    }

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

Upvotes: 0

Related Questions