Highchart: Making a single series scrollable and changing x-axis variable upon drilldown

Question

before I ask my question here is my jsfiddle http://jsfiddle.net/woon123/9155d4z6/1/

  $(document).ready(function () {
      $('#deal_venue_chart').highcharts({
          chart: {
              type: 'column'
          },
          credits: {
              enabled: false
          },
          title: {
              text: 'Popularity of Deals in Venues'
          },
          subtitle: {
              text: 'Redemption Count'
          },
          yAxis: {
              allowDecimals: false,
              min: 0,
              title: {
                  text: 'Number of Redeems'
              }
          },
          scrollbar: {
              enabled: true
          },
          plotOptions: {
              series: {
                  dataLabels: {
                      enabled: true,
                      align: 'center',
                      color: '#000000',
                      overflow: 'justify',
                      crop: true
                  },
                  pointWidth: 150
              }
          },
          xAxis: {
              min: 0,
              max: 0,
              type: 'category'
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              y: 30
          },
          series: [{
              name: '<span style="color: #00910c">Active: </span>' + '1 Free Soju Cocktails for every Main Meal Purchased',
              data: [{
                  name: "Deals",
                  y: 718,
                  drilldown: "1 Free Soju Cocktails for every Main Meal Purchased" + " active",
                  dataLabels: {
                      format: "1 Free Soju Cocktails for every Main Meal Purchased"
                  }
              }]
          }, {
              name: '<span style="color: #00910c">Active: </span>' + '4pcs Fried Chicken @ $8.00',
              data: [{
                  name: "Deals",
                  y: 746,
                  drilldown: "4pcs Fried Chicken @ $8.00" + " active",
                  dataLabels: {
                      format: "4pcs Fried Chicken @ $8.00"
                  }
              }]
          }, {
              name: '<span style="color: #00910c">Active: </span>' + '50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!',
              data: [{
                  name: "Deals",
                  y: 365,
                  drilldown: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!" + " active",
                  dataLabels: {
                      format: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!"
                  }
              }]
          },

          {
              id: "1 For 1 Chicken Up Wings and Korean Bingsu" + ' (Redemption Count)',
              name: '<span style="color: #df1007">Expired: </span>' + '1 For 1 Chicken Up Wings and Korean Bingsu',
              data: [{
                  name: "Deals",
                  y: 1039,
                  drilldown: "1 For 1 Chicken Up Wings and Korean Bingsu" + " past",
                  dataLabels: {
                      format: "1 For 1 Chicken Up Wings and Korean Bingsu"
                  }
              }],
              visible: false
          }, ],
          drilldown: {
              series: [{
                  name: "Venues",
                  id: "1 Free Soju Cocktails for every Main Meal Purchased" + " active",
                  data: [
                      [
                          "Chicken Up @ Jurong East", 310],
                      [
                          "Chicken Up @ Tampines", 171],
                      [
                          "Chicken Up @ Tanjong Pagar", 237], ]
              }, {
                  name: "Venues",
                  id: "4pcs Fried Chicken @ $8.00" + " active",
                  data: [
                      [
                          "Chicken Up @ Jurong East", 242],
                      [
                          "Chicken Up @ Tampines", 337],
                      [
                          "Chicken Up @ Tanjong Pagar", 167], ]
              }, {
                  name: "Venues",
                  id: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!" + " active",
                  data: [
                      [
                          "Chicken Up @ Jurong East", 69],
                      [
                          "Chicken Up @ Tampines", 132],
                      [
                          "Chicken Up @ Tanjong Pagar", 164], ]
              },

              {
                  name: "Venues",
                  id: "1 For 1 Chicken Up Wings and Korean Bingsu" + " past",
                  data: [
                      [
                          "Chicken Up @ Jurong East", 381],
                      [
                          "Chicken Up @ Tampines", 214],
                      [
                          "Chicken Up @ Tanjong Pagar", 444], ]
              },

              ]
          }
      });
  });

I have two questions which I hope can be answered.

Firstly, I have only one series before I drilldown and I am trying to make that single series scrollable. However, it is not working out. My entire series is still crushed together which is what I am trying to avoid. Also as I will be increasing the number of columns, it is not possible to set a smaller size to the column to fit.

My second question is that since from what I know, I will need to declare x-axis min and max in order for scrollbar to work. Before I drilldown there is only one series so min and max will be both 0. However, after I drilldown, I might get 3 or more series. In this case my min should be 0 while max should be 2. How do I change my min and max? I know such a code exist to help change title of the chart in the case of drilldown and drillup as shown below

  chart: {
      type: 'column',
      events: {
          drilldown: function (e) {
              this.setTitle({text: "Popularity of Deal of Deal Type " + e.point.name});
          },
          drillup: function (e) {
              this.setTitle({text: 'Popularity of Deal Types'});
          }
      }
  }

However, I can't seem to find the function to help change min and max of x-axis.

I would appreciate any help thank you!

Answer 1

1) In case when you need to scroll categories, set min/max and then define separate x per each point. In your example all points you have with the same cat.

2) In drilldown / drillup events, you can call setExtremes.