Display another chart on click of a bar in React

Shama Ahlawat
Nov 6, 2020

I have designed a bar chart. When I click on a particular bar I need another chart to be displayed on the same page.

Check out these three links for a better understanding.

a) https://codesandbox.io/s/highcharts-react-demo-ovx90

b) https://www.highcharts.com/demo/column-drilldown

c) https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/ChartsDrillDown/React/Light/

Check the below example .

  1. constants.js — Here I have initialized all the graph configurations like graph height, font size, legends, etc.

2) chart.js — Here I am converting backend data into the drilldown chart format and passing it to drilldown chart component.

3) drilldownChart.js — Plotting chart after receiving data

Output

--

--

Shama Ahlawat

I am Software Developer and i am working for startup ecosystem. Fashion is my passion.I want to contribute to the world before I die.