0

In the code below, 'chartList' is an array of chart variables set with specific data. When selection is made from dropdown for one of the pie chart, all other such pie charts are getting refreshed/ re-rendered.

chartsList.forEach(chart => {
                var div = document.createElement("div")
                div.id = "container" + chartCounter
                div.style.width = "510px"
                div.style.height = "240px"
                div.style.display = "inline-block"
                document.getElementById("Pie").appendChild(div)
                Highcharts.chart("container" + chartCounter, chart);
                chartCounter++
            })

Also is this correct way of creating multiple pie charts on the fly? If not, suggest me some alternate way.

  • Hi @Ameya Babhulgaonkar, I recommend you to use the officially supported wrapper for Highcharts: https://www.npmjs.com/package/highcharts-react-official – ppotaczek Feb 18 '20 at 11:47
  • How will it help me with my problem? How to make only one of the pie chart re-render? – Ameya Babhulgaonkar Feb 18 '20 at 13:49
  • but what is the exact case? You are creating five charts and what is happening when you select some option in the select? – ppotaczek Feb 18 '20 at 17:49
  • Each pie chart has select(dropdown). When I make some selection in one pie chart, after selection rest all get re-rendered. Rather I want only the one whose 'select' I had changed to re-render not all. – Ameya Babhulgaonkar Feb 19 '20 at 09:26
  • Hi @Ameya Babhulgaonkar, Please check this example with `highcharts-react-official`: https://codesandbox.io/s/highcharts-react-demo-6jd0u – ppotaczek Feb 19 '20 at 10:56
  • Thank you. But seems like you have added 5 different '' tags. Whereas I have such multiple pie charts within one '' as I need to decide the number of pie charts based on some check. Any suggestion? Thank you! – Ameya Babhulgaonkar Feb 20 '20 at 05:00
  • You can render some number of charts depending on some condition, for example: https://codesandbox.io/s/highcharts-react-demo-4dxeu – ppotaczek Feb 20 '20 at 11:12
  • I am fetching data from API and I need to filter data based on some parameters from data. Use case: Suppose there is s/w 'x' and there are few releases of it. I want as many pie charts as the number of releases of that s/w. Purpose of pie chart is to show the status of installation of releases(PASS, FAIL). To represent this phenomenon, I have followed this: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-drilldown/. Plus I have added dropdown so as to choose between different environments(OS, DB)used for installation of that release of sw. – Ameya Babhulgaonkar Feb 21 '20 at 07:16
  • Ok, but what is the exact problem? Everything you described is possible to achieve with Highcharts and the React wrapper. – ppotaczek Feb 21 '20 at 08:18
  • When I use drop-down of one pie chart, other pie charts get rendered whereas I want only the one to get re-rendered whose drop-down was clicked. Basically the render() method is getting executed each time I make selection from any of the drop-down. How to make only the concerned pie chart to re-render? – Ameya Babhulgaonkar Feb 22 '20 at 09:58
  • I've already answered this question - create your charts by using the `highcharts-react-official` wrapper. – ppotaczek Feb 24 '20 at 11:17
  • Alright. Thanks. But I want to render new data in `for (var i = 0; i < chartNum; i++) { charts.push(); }` every time. Can I send required data to ? – Ameya Babhulgaonkar Feb 25 '20 at 12:52
  • Yes of course, you can pass the data by props. – ppotaczek Feb 25 '20 at 17:43
  • Can you put link to some demo code? – Ameya Babhulgaonkar Feb 26 '20 at 05:38
  • Please check this example: https://codesandbox.io/s/highcharts-react-demo-rcp28 – ppotaczek Feb 26 '20 at 10:02
  • Thank you very much. Also, how to call API in this code? Plus the dropdown you have created is static one. I want to create it based on data from API as I might not know the option values upfront. How to do that? – Ameya Babhulgaonkar Feb 26 '20 at 10:49
  • Call the API in the `useEffect` hook. Check this example: https://codesandbox.io/s/highcharts-react-demo-0cddr to find out how to create dynamic dropdown. – ppotaczek Feb 26 '20 at 11:34
  • Thanks. Why `renderCharts()` is executed four times? I tried adding `console.log()` in it. Is there any way to make it execute only once? – Ameya Babhulgaonkar Feb 28 '20 at 06:22
  • That's because of Reack hooks. To avoid that put the function in `useEffect`. For example: https://codesandbox.io/s/highcharts-react-demo-4r3hs – ppotaczek Feb 28 '20 at 10:58
  • Okay. Thanks. How to get value of select dropdown? Also, is `' possible? If not what is the correct way of doing it? – Ameya Babhulgaonkar Feb 28 '20 at 11:35
  • You can get the value in the `onChange` event. You need to set `` or ``. Example: https://codesandbox.io/s/highcharts-react-demo-j0y73 – ppotaczek Feb 28 '20 at 11:43
  • Can't I access value of select anywhere else? or is it possible to pass value of select to `Chart(props)` ? – Ameya Babhulgaonkar Mar 02 '20 at 07:09
  • You can also access the value in the same way as with pure JS. – ppotaczek Mar 02 '20 at 10:00
  • Okay. Also, can we define the size of the container where the Pie Chart is placed? I want them all to appear in a single row(horizontally) with scroll bar instead of one under another. – Ameya Babhulgaonkar Mar 03 '20 at 06:41
  • Please create separate threads for additional questions, because our conversation will go on forever. – ppotaczek Mar 03 '20 at 08:11

0 Answers0