#using react-apexcharts in Astro

7 messages · Page 1 of 1 (latest)

trail imp
#

I want to use react-apexcharts in astro (in a preact component actually)

here is my jsx component

import { useState } from "preact/hooks";
import Chart from "react-apexcharts";

const MyChartComponent = () => {
  const options = { labels: ["Cases", "Recovered", "Deaths"] };
  const [dataSeries, setDataSeries] = useState([14, 97, 5]);

  function update() {
    console.log("hey");
    setDataSeries([Math.random(), Math.random(), Math.random()]);
  }

  return (
    <div className="app">
      <div className="row">
        <div className="mixed-chart">
          <Chart
            options={options}
            series={dataSeries}
            type="donut"
            width="300"
          />
        </div>
      </div>
      <button onClick={update}>Update</button>
    </div>
  );
};

export default MyChartComponent;

I am getting the error shown in the attached image

screenshot-localhost_3000-2022.10.10-14_51_20.png
viscid yew
#

Are you calling the component with a client directive set? Like: client:only=“preact”?

If you don’t use a client-side only render, then the pre-render on the server side will fail because there’s no access to the browser’s window object.

trail imp
#

I have imported but not yet used the component

trail imp
#

I will test it tomorrow when I have my laptop with me

trail imp
#

This worked, thank you. I also needed to use compat and do the overrides in package.json to make react-apexcharts work in preact.

sage frost
trail imp