score:1

Accepted answer

one solution is to use useeffect hook and pass detailsin useeffect dependencies, so every time details will change his state useeffect will be trig and your datavalues will be updated:

import react, { usestate, useeffect } from "react";
import { render } from "react-dom";
// import highcharts
import highcharts from "highcharts/highstock";
import piechart from "highcharts-react-official";

const app = () => {
  const [details, setdetails] = usestate("sup");
  let datavalue = [
    ["firefox", 45.0],
    ["ie", 26.8],
    ["chrome", 12.8],
    ["safari", 8.5],
    ["opera", 6.2],
    ["others", 0.7]
  ]; //pass default "sup" to datavalue
  const [chartoptions, setchartoptions] = usestate({
    chart: {
      type: "pie"
    },
    title: {
      text: ""
    },
    plotoptions: {
      pie: {
        size: "50%",
        allowpointselect: true,
        cursor: "pointer",
        depth: 35,
        innersize: 100,
        datalabels: {
          enabled: false
        },
        showinlegend: true
      }
    },
    series: [
      {
        type: "pie",
        name: "browser share",
        data: datavalue
      }
    ]
  });
  useeffect(() => {
    console.log(details);
    if (details === "sup") {
      datavalue = [
        ["firefox", 45.0],
        ["ie", 26.8],
        ["chrome", 12.8],
        ["safari", 8.5],
        ["opera", 6.2],
        ["others", 0.7]
      ];
    } else if (details === "hola") {
      datavalue = [
        ["apple", 35],
        ["guava", 40],
        ["grapes", 22.5]
      ];
    }
    setchartoptions((prev) => {
      return {
        ...prev,
        series: [
          {
            type: "pie",
            name: "browser share",
            data: datavalue
          }
        ]
      };
    });
  }, [details]);

  async function newfetchvendor(e) {
    if (!!e) {
      setdetails(e.target.value);
    }
  }

  return (
    <div>
      <select onchange={newfetchvendor}>
        <option value="sup">sup</option>
        <option value="hola">hola</option>
      </select>
      <piechart
        highcharts={highcharts}
        options={chartoptions}
        onetoone={true}
      />
    </div>
  );
};

render(<app />, document.getelementbyid("root"));


edit highcharts react demo (forked)


Related Query

More Query from same tag