CODEWITHSUNDEEP
javascripthighcharts
Yashpal S
Yashpal S

Reputation: 319

Show some data in tabular format in high chart's pie chart drill down

I am having a highchart's pie chart in my angular project. In the drill down of that pie chart I want to display some data in tabular format in place of pie chart.

So basically pie chart should be replaced with tabular data once user clicks on slice of pie also user should be able to move back to pie chart, usually like we have drill downs in highcharts.

Can someone please help me to move to next step. Thanks in advance.

Upvotes: 0

Views: 809

Answers (1)

morganfree
morganfree

Reputation: 12472

You can use drilldown functionality to go in and out of the pie slices. If the drilldown series have empty data then after the drilldown the chart has space to put an html table.

You can hook into drilldown and drillup events to show/hide/center table or even control animations.

const tables = {
  'chrome': document.getElementById('chrome'),
  'firefox': document.getElementById('firefox')
}

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      drilldown(e) {
        const table = tables[e.point.drilldown]

        table.style.display = 'block'

        const tableRect = table.getBoundingClientRect()
        const containerRect = this.container.getBoundingClientRect()

        table.style.left = (containerRect.left + (containerRect.width - tableRect.width) / 2) + 'px'
        table.style.top = (containerRect.top + (containerRect.height - tableRect.height) / 2) + 'px'
      },
      drillup(e) {
        Object.values(tables).forEach(table => table.style.display = 'none')
      }
    }
  },

  "series": [{
    "name": "Browsers",
    "colorByPoint": true,
    "data": [{
        "name": "Chrome",
        "y": 62.74,
        "drilldown": "chrome"
      },
      {
        "name": "Firefox",
        "y": 10.57,
        "drilldown": "firefox"
      }
    ]
  }],
  "drilldown": {
    "series": [{
        "name": "Chrome",
        "id": "chrome",
        "data": []
      },
      {
        "name": "Firefox",
        "id": "firefox",
        "data": []
      }
    ]
  }
});

live example: https://jsfiddle.net/q2fm0v49/

Upvotes: 2

Related Questions