How to change width / padding between categories?

Question

I'm creating an 3D cylinder grouping chart. How to put some space between categories? The purple cylinder seems to get blocked because it's really close. I've tried point padding, xAxis padding. Nothing seems to work. And i don't want to use group padding because it will make the cylinder smaller. I need it to be that size.

      let categories = [];
      let result = { };
      for(let i=0;i<$scope.charData.length;i++) {
        categories.push($scope.charData[i].PERIODE);
        for(let prop in $scope.charData[i]) {
          if(prop ==  `PERIODE`) continue;
          if(result[prop] == null) { result[prop] = []; }
          result[prop].push(parseFloat($scope.charData[i][prop]));
        }
      }
      let resultView = [];
      let deep = 0;
      for(let prop in result) {
        resultView.push({
          name: prop,
          data: result[prop],
          depth: deep,
        });
        deep += 75;
      }

      Highcharts.chart('chartdiv', {
        chart: {
          type: 'cylinder',
          options3d: {
            enabled: true,
            alpha: 25,
            beta: 5,
            viewDistance: 0,
            depth: 100
          },
          scrollablePlotArea: {
            minWidth: ($scope.device) ? 1200 : 0,
            opacity: 0.85,
          },
          spacingLeft: 0,
          marginLeft: ($scope.device) ? -120 : -50,
          marginRight: ($scope.device) ? -120 : -50,
        },

        title: {
          text: 'Sales Simex ' + ($scope.year - 1) + ' - ' + $scope.year
        },

        xAxis: {
          categories: categories,
          min: 0,
          labels: {
            skew3d: true,
            style: {
              fontSize: '16px'
            },
          },
        },

        yAxis: {
          allowDecimals: false,
          min: 0,
          title: {
            text: 'Amount',
            skew3d: true
          },
        },

        tooltip: {
          headerFormat: '<b>{point.key}</b><br>',
          pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
          column: {
            stacking: 'normal',
            depth: 100,
          },
          cylinder: {
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0
          }
        },
        series: resultView,
      });

Wojciech Chmiel Wojciech Chmiel · Accepted Answer · 2019-07-23T07:33:01

To make more space between categories you can decrease beta parameter, increase groupPadding or increase chart width. Note, that groupPadding make cylinders smaller due to more space between them, so you have to decide.

Demo:

Highcharts.chart('container', {
  chart: {
    type: 'cylinder',
    options3d: {
      enabled: true,
      alpha: 25,
      beta: 10,
      viewDistance: 0,
      depth: 100
    }
  },
  title: {
    text: 'Highcharts Cylinder Chart'
  },
  xAxis: {
    min: 0,
    labels: {
      skew3d: true,
      style: {
        fontSize: '16px'
      },
    },
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Amount',
      skew3d: true
    },
  },
  plotOptions: {
    series: {
      depth: 25,
      colorByPoint: true
    },
    column: {
      stacking: 'normal',
      depth: 100,
    },
    cylinder: {
      groupPadding: 0.3,
      pointPadding: 0.15,
      borderWidth: 0
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 10,
    name: 'Cylinders1',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 40,
    name: 'Cylinders2',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 70,
    name: 'Cylinders2',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 100,
    name: 'Cylinders2',
    showInLegend: false
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

How to change width / padding between categories?

1 Answers