CODEWITHSUNDEEP
javascripthighcharts
arpit joshi
arpit joshi

Reputation: 2144

Remove TickInterval on drillDown in highcharts

The issue which I am facing is on drill down the tick interval labels are still present on axis , on drill up I need my tickInterval to be 0.5 but on drill down I don't want any tick interval so that they don't get displayed on x-axis ,

enter image description here

As seen the interval is 0.5 but now when I drill down 8.5 ,it shows below and the interval labels are still present

enter image description here

Below is my code 

Highcharts.chart('container', {
    chart: {
        type: 'column',
       events : {
                        drilldown : function(e) {
                            this.xAxis[0].setTitle({
                                text : 'MilestoneTypeId'
                            });

              this.xAxis[0].tickmarkPlacement = 'off'
              this.setTitle({ text: "Error Distribution by Milestone" });
                        },
                        drillup : function(e) {
                            this.xAxis[0].setTitle({
                                text : 'Mean Absolute Error (in days)'
                            });
              this.xAxis[0].tickmarkPlacement = 'on'
              this.setTitle({ text: "Error Distribution in Days" });
                        }
                    }
    }, 

    title: {
        text: 'Error Distribution (Days)'
    },
   xAxis : {
                    title : {
                        text : 'Mean Absolute Error (in days)'
                    },
                    type: 'category',
                    tickInterval : 0.50,
                    crosshair : true
                },
                yAxis : {
                    title : {
                        text : 'Predicted Milestone Count'
                    }
                },


    tooltip : {
                    headerFormat : '',
                    shared : true,
                    pointFormat : 'Predicted Milestone Count : {point.y}'

                },

    series: [
        {
            name: "Error Distribution by Days Report",
            data: [

   {
      "x":1.5,
      "y":1000,
      "drilldown":"1.5",
      "name":1.5
   },
   {
      "x":2,
      "y":500,
      "drilldown":"2",
      "name":2
   },
   {
      "x":2.5,
      "y":500,
      "drilldown":"2.5",
      "name":2.5
   },
   {
      "x":3.5,
      "y":500,
      "drilldown":"3.5",
      "name":3.5
   },
   {
      "x":4,
      "y":500,
      "drilldown":"4",
      "name":4
   },
   {
      "x":5,
      "y":500,
      "drilldown":"5",
      "name":5
   },
   {
      "x":6,
      "y":500,
      "drilldown":"6",
      "name":6
   },
   {
      "x":8.5,
      "y":1000,
      "drilldown":"8.5",
      "name":8.5
   },
   {
      "x":9,
      "y":500,
      "drilldown":"9",
      "name":9
   },
   {
      "x":10,
      "y":3508,
      "drilldown":"10",
      "name":"More"
   }

            ]
        }
    ],
    drilldown: {
        series:[
   {
      "name":"2",
      "id":"2",
      "pointWidth":30,
      "data":[
         [
            "Event33",
            500
         ]
      ]
   },
   {
      "name":"4",
      "id":"4",
      "pointWidth":30,
      "data":[
         [
            "Event42",
            500
         ]
      ]
   },
   {
      "name":"5",
      "id":"5",
      "pointWidth":30,
      "data":[
         [
            "Event11",
            500
         ]
      ]
   },
   {
      "name":"6",
      "id":"6",
      "pointWidth":30,
      "data":[
         [
            "Event1",
            500
         ]
      ]
   },
   {
      "name":"9",
      "id":"9",
      "pointWidth":30,
      "data":[
         [
            "Event23",
            500
         ]
      ]
   },
   {
      "name":"10",
      "id":"10",
      "pointWidth":30,
      "data":[
         [
            "Event24",
            501
         ],
         [
            "Event14",
            1001
         ],
         [
            "Event2",
            1
         ],
         [
            "Event3",
            1001
         ],
         [
            "Event10",
            1
         ],
         [
            "Event8",
            1001
         ],
         [
            "Event1",
            1
         ],
         [
            "Event5",
            1
         ]
      ]
   },
   {
      "name":"1.5",
      "id":"1.5",
      "pointWidth":30,
      "data":[
         [
            "Event6",
            500
         ],
         [
            "Event5",
            500
         ]
      ]
   },
   {
      "name":"2.5",
      "id":"2.5",
      "pointWidth":30,
      "data":[
         [
            "Event4",
            500
         ]
      ]
   },
   {
      "name":"3.5",
      "id":"3.5",
      "pointWidth":30,
      "data":[
         [
            "Event3",
            500
         ]
      ]
   },
   {
      "name":"8.5",
      "id":"8.5",
      "pointWidth":30,
      "data":[
         [
            "Event2",
            500
         ],
         [
            "Event1",
            500
         ]
      ]
   }
]

    }
});

Here's my jsfiddle link https://jsfiddle.net/L0mgdwc4/

Upvotes: 0

Views: 172

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can use the xAxis.update feature to disable the tickInterval while the drilldown event triggers and use the same feature to enable while drillup.

Demo: https://jsfiddle.net/BlackLabel/zex8jfah/

  events: {
    drilldown: function(e) {
      this.xAxis[0].setTitle({
        text: 'MilestoneTypeId'
      });

      this.xAxis[0].tickmarkPlacement = 'off'
      this.setTitle({
        text: "Error Distribution by Milestone"
      });

      this.xAxis[0].update({
              tickInterval: 0,
      })
    },
    drillup: function(e) {
      this.xAxis[0].setTitle({
        text: 'Mean Absolute Error (in days)'
      });
      this.xAxis[0].tickmarkPlacement = 'on'
      this.setTitle({
        text: "Error Distribution in Days"
      });

      this.xAxis[0].update({
              tickInterval: 0.5,
      })
    }
  }

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

Upvotes: 1

Related Questions