RIo
Posts: 3
Joined: Thu Sep 07, 2023 12:24 pm

Updating chart data dynamically

Tue Sep 19, 2023 12:24 pm

Hi,

I'm having trouble updating the chart data. Inside the react app I have a useState hook where the chart data is stored. When the user clicks on a series, I want to hide all other series and show only the one he clicked on. Here is the code as I implemented it.

Code: Select all


  const [chartOptions, setChartOptions] = React.useState<Highcharts.Options>({});


 setChartOptions({
     plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            marker: {
              enabled: true
            },
            cursor: 'pointer',
            events: {
              click() {
                const { name } = this;
                const lines = cloneDeep(chartPoints);

                if (!historyEnabled) {
                  lines?.forEach((item) => {
                    if (item.type === 'line' && String(item.name) !== String(name)) {
                      item.visible = false;
                    } else {
                      console.log(name);
                    }
                  });
                } else {
                  lines?.forEach((item) => {
                    if (item.type === 'line') {
                      item.visible = true;
                    }
                  });
                }
                historyEnabled = !historyEnabled;
                if (lines) {
[color=#FF0000]// HERE IS THE PROBLEM. I FILTER THE DATA AND SET UP NEW SERIES, BUT THE TABLE IS NOT UPDATED[/color]
                  const newData = lines.filter((item) => item.visible);
                  setChartOptions({
                    series: newData
                  });
                }
              }
            }
          }
        },
})

kamil.k
Posts: 398
Joined: Thu Oct 06, 2022 12:49 pm

Re: Updating chart data dynamically

Wed Sep 20, 2023 11:02 am

Hello There!

Thanks for contacting us with your question again.

We already have very similar topics with potential implementations, and I'd like to refer you to them first as we try not to duplicate topics on our support channels. Please take a look:
- https://stackoverflow.com/questions/657 ... -highcarts
- https://stackoverflow.com/questions/660 ... rsal-of-de

Let me know if there's anything unclear to you or if you need any help implementing those solutions,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”