How to use recharts without a build system?

[Kreijstal]

I have no access to JSX, just assume I'm using esm.sh how would I create a chart?

[ckifer]

What is esm.sh?

Recharts is a react library, you cannot use it without JSX

[Kreijstal]

You can use react without JSX.. JSX transpiles to JS

[Kreijstal]

I apologize for my harsh tone earlier - that wasn't constructive.

While Recharts is indeed a React library, it's important to note that JSX is not a requirement for using React - it's just syntactic sugar that gets transformed into JavaScript. React can be used with plain JavaScript calls to React.createElement() or similar factory functions.

I've created a working example demonstrating Recharts usage without JSX here: https://observablehq.com/@kreijstal/rechart-without-build-system

For those unfamiliar, esm.sh is a CDN that provides ESM versions of npm packages, allowing direct usage in browsers without a build system. This can be particularly useful for prototyping or environments where setting up a full build pipeline isn't practical.

I hope this clarification helps others who might be looking to use Recharts in similar environments.

[Kreijstal]

inline using htm is Slower than just using React.createElement:

let React = await import("https://esm.sh/[email protected]")
let ReactDOM = await import("https://esm.sh/[email protected]")
let htm = await import("https://esm.sh/htm/react")
const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts;

  const data = [
    { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
    { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
    { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
    { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
    { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
    { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
    { name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
  ];

  // Bind HTM's html function to React.createElement
  const jsx = htm.html;

  // Create chart using HTM's jsx syntax
  const chart = jsx`
    <${AreaChart} 
      width=${730} 
      height=${250} 
      data=${data} 
      margin=${{ top: 10, right: 30, left: 0, bottom: 0 }}
    >
      <defs>
        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
          <stop offset="5%" stopColor="#8884d8" stopOpacity=${0.8} />
          <stop offset="95%" stopColor="#8884d8" stopOpacity=${0} />
        </linearGradient>
        <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
          <stop offset="5%" stopColor="#82ca9d" stopOpacity=${0.8} />
          <stop offset="95%" stopColor="#82ca9d" stopOpacity=${0} />
        </linearGradient>
      </defs>
      <${XAxis} dataKey="name" />
      <${YAxis} />
      <${CartesianGrid} strokeDasharray="3 3" />
      <${Tooltip} />
      <${Area} 
        type="monotone" 
        dataKey="uv" 
        stroke="#8884d8" 
        fillOpacity=${1} 
        fill="url(#colorUv)" 
      />
      <${Area} 
        type="monotone" 
        dataKey="pv" 
        stroke="#82ca9d" 
        fillOpacity=${1} 
        fill="url(#colorPv)" 
      />
    <//>
  `;

  // Create a container element
  const container = document.createElement("div");

  // Render the chart into the container
  ReactDOM.render(chart, container);

[ckifer]

Ah, apologies as well. I should have waited for your response. I was quick to assume that when you said "without JSX" you also meant "without React itself" which you did not.

Much appreciate you editing your comment. I've reopened this and it'll be here for informational purposes.

Note that this isn't a supported use case though - if this broke for some reason I don't think recharts would be able to support it.