Support Chart component

[oliviertassinari]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Make it possible to display charts

Benchmark 🌈

• https://www.notion.so/mui-org/Chart-component-7b30cff4fdab4d2e8adbe0c796821f45
• https://github.com/mui/mui-x/issues/1408
• https://retool.com/components/chart
• https://docs.appsmith.com/reference/widgets/chart

Motivation 🔦

I would like to plot this data https://api.ossinsight.io/q/analyze-issue-open-to-first-responded?repoId=23083156 which is about the median time to get feedback on issues in https://github.com/mui/material-ui. It's meant to replace https://mui-repository-health-dashboard.vercel.app/. So far, I have tried:

• reaviz ❌ https://master--toolpad.mui.com/_toolpad/app/cl42qt2jx01249xnr14xjce8b/editor/codeComponents/cl6rsvyg400003b6gwlzpovht. Fail with

• victory ❌ https://master--toolpad.mui.com/_toolpad/app/cl42qt2jx01249xnr14xjce8b/editor/codeComponents/cl6rsxp8q00023b6gu7dfcvg6. Fail with

• react-vis ✅ https://master--toolpad.mui.com/_toolpad/app/cl42qt2jx01249xnr14xjce8b/editor/codeComponents/cl6rtolju00003b6gcl9wrueb

Source

import * as React from "react";
import { createComponent } from "@mui/toolpad-core";
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineMarkSeries,
} from "https://cdn.skypack.dev/react-vis";

export interface ChartProps {
  msg: string;
}

async function createReactVisStyles(doc) {
  let styles = doc.getElementById("react-vis-css");
  if (styles) {
    return;
  }
  const res = await fetch("https://esm.sh/react-vis/dist/style.css");
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  }
  const css = await res.text();
  styles = doc.createElement("style");
  styles.id = "react-vis-css";
  styles.appendChild(doc.createTextNode(css));
  doc.head.appendChild(styles);
}

function Chart({ msg }: ChartProps) {
  const root = React.useRef(null);

  React.useEffect(() => {
    const doc = root.current.ownerDocument;
    createReactVisStyles(doc);
  }, []);

  return (
    <div ref={root}>
      <XYPlot width={300} height={300}>
        <VerticalGridLines />
        <HorizontalGridLines />
        <XAxis />
        <YAxis />
        <LineMarkSeries
          className="linemark-series-example"
          style={{
            strokeWidth: "3px",
          }}
          lineStyle={{ stroke: "red" }}
          markStyle={{ stroke: "blue" }}
          data={[
            { x: 1, y: 10 },
            { x: 2, y: 5 },
            { x: 3, y: 15 },
          ]}
        />
        <LineMarkSeries
          className="linemark-series-example-2"
          curve={"curveMonotoneX"}
          data={[
            { x: 1, y: 11 },
            { x: 1.5, y: 29 },
            { x: 3, y: 7 },
          ]}
        />
      </XYPlot>
    </div>
  );
}

export default createComponent(Chart, {
  argTypes: {
    msg: {
      typeDef: { type: "string" },
      defaultValue: "Hello world!",
    },
  },
});

• Ant Design charts ❌ https://master--toolpad.mui.com/_toolpad/app/cl42qt2jx01249xnr14xjce8b/editor/codeComponents/cl6umjlzv00013b6gsf59dy1y

[liesislukas]

i would vote for echart. While it's api has pretty much everything you may need from the charts.

It was created like a decade ago. Is stable as could be. Had a lot of updates. API is stable for the last at least 5 or more years. Has pretty good visual, if you don't like that there are theme options too for anything visible. It's open source too.

there are pre-made themes, there is official theme builder too: https://echarts.apache.org/en/theme-builder.html

A ton of samples:

https://echarts.apache.org/examples/en/index.html

[oliviertassinari]

@liesislukas Based on the benchmark that we did for MUI X, echarts is indeed a big one https://mui-org.notion.site/Chart-component-7b30cff4fdab4d2e8adbe0c796821f45.

As a side note, On MUI X, we are considering building charts specifically for React as it's a frequent request we hear, but we struggling a bit to identify strong enough problems with the existing JS charting libraries for an effort to make sense, we could double down on the data grid 😁.

[liesislukas]

@oliviertassinari on side note

Charting sounds offtopic for me in mui org context, because it's more of SVG component. Reactjs focus is on dom, not SVG. mui org is doing all the stuff around dom too. charting has a lot of things to be done well which requires a lot of high-quality talent, which means a lot of expenses. Yet the charting market is full of solutions. If you want to provide a better way to use charts within mui.com components, I would consider better making some helper components for the top 5 open source charting solutions like echarts, while it's super old, stable, and has everything in it already.

Maybe it would make sense in some cases to add some basic charts - like simple pie, line, bar, and gauge but in general, I would not focus much. The only benefit would be to have minimal charts w/o the need to add big charting lib. Building something like echarts will eat up a ton of resources and building something with less polish level wouldn't make sense for someone like mui.com too, while I at least expect quality from mui.com, as it delivers now.

I would rather focus those resources you consider to put into building one more charting solution rather than building some freelancing area which would allow me to find talent for UI tasks & focus on continuing to provide the best possible UI components for DOM via Joy UI project (components + theming), then for designers best possible design kits for Figma, etc. and some interesting productivity boosts via Toolpad instead.

[oliviertassinari]

@liesislukas Thanks for sharing your thoughts on this.

Related to it. What's your take on recharts? It's React only, SVG only, and seems to be the most popular charting library that we could find that targets the web ecosystem (e.g. more popular than echarts). It's also abandoned by its 1-2 maintainers.

[oliviertassinari]

I have tried recharts, it seems to work well:

https://master--toolpad.mui.com/deploy/clcdobvof0008n99jpx86fede/pages/331kqzd

import * as React from "react";
import { createComponent } from "@mui/toolpad-core";
import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
} from "https://esm.sh/[email protected]";

// Copied from https://wpdatatables.com/data-visualization-color-palette/
const COLORS = [
  "#ea5545",
  "#f46a9b",
  "#ef9b20",
  "#edbf33",
  "#ede15b",
  "#bdcf32",
  "#87bc45",
  "#27aeef",
  "#b33dc6",
];

export interface PieChartProps {
  data: object[];
}

function PieChartExport({ data }: PieChartProps) {
  return (
    <PieChart width={300} height={300}>
      <Pie
        data={data}
        cx={150}
        cy={150}
        innerRadius={0}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <Tooltip
        formatter={(value, name, props) =>
          Intl.NumberFormat("en", { notation: "compact" }).format(value)
        }
      />
    </PieChart>
  );
}

export default createComponent(PieChartExport, {
  argTypes: {
    data: {
      typeDef: { type: "array" },
      defaultValue: [
        { name: "Group A", value: 400 },
        { name: "Group B", value: 300 },
        { name: "Group C", value: 300 },
        { name: "Group D", value: 200 },
      ],
    },
  },
});

cc @joserodolfofreitas The composable SVG API of recharts felt great, however, their docs isn't great, we could do much better. I think that we could move in this direction.

[mnajdova]

I have tried recharts, it seems to work well

This is not working for me locally, for e.g. the https://github.com/mui/mui-public/tree/master/tools-public is failing locally with the error (@mui/[email protected])

Using @mui/[email protected] in a local project, the same code fails with this error:

It's worth mentioning that I am on Windows.

[Janpot]

The second error you get seems what I'd expect. Importing react components currently doesn't work at all if they're using hooks. This is due to them importing a different react version than the one of the toolpad runtime. It's a tough problem to solve in the current runtime as we're not compiling any javascript. ATM I'm finishing work on a new runtime https://github.com/mui/mui-toolpad/pull/1881 which instead supports importing from the node_modules folder and does handle importing react components correctly. It's a rewrite of the runtime using vite under the hood as a build tool and a devserver. It'll also result in a much faster runtime as it will compile the frontend of the user application to a web application that can be statically hosted.

[n-priest]

I have tried recharts, it seems to work well:

https://master--toolpad.mui.com/deploy/clcdobvof0008n99jpx86fede/pages/331kqzd

import * as React from "react";
import { createComponent } from "@mui/toolpad-core";
import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
} from "https://esm.sh/[email protected]";

// Copied from https://wpdatatables.com/data-visualization-color-palette/
const COLORS = [
  "#ea5545",
  "#f46a9b",
  "#ef9b20",
  "#edbf33",
  "#ede15b",
  "#bdcf32",
  "#87bc45",
  "#27aeef",
  "#b33dc6",
];

export interface PieChartProps {
  data: object[];
}

function PieChartExport({ data }: PieChartProps) {
  return (
    <PieChart width={300} height={300}>
      <Pie
        data={data}
        cx={150}
        cy={150}
        innerRadius={0}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <Tooltip
        formatter={(value, name, props) =>
          Intl.NumberFormat("en", { notation: "compact" }).format(value)
        }
      />
    </PieChart>
  );
}

export default createComponent(PieChartExport, {
  argTypes: {
    data: {
      typeDef: { type: "array" },
      defaultValue: [
        { name: "Group A", value: 400 },
        { name: "Group B", value: 300 },
        { name: "Group C", value: 300 },
        { name: "Group D", value: 200 },
      ],
    },
  },
});

cc @joserodolfofreitas The composable SVG API of recharts felt great, however, their docs isn't great, we could do much better. I think that we could move in this direction.

@oliviertassinari We love recharts. Docs with more advanced features would be nice but the community has good examples. Doesn't support 3d rendering but it gets the job done.

[markus-kraeutner]

@oliviertassinari There are some points, which available libraries do not address, in my opinion:

We need true X/Y charts for technical diagrams (think line charts with "knots") and also real time capabilities.

Almost every charting library we evaluated has the assumption that one X value has at most one Y value. They seem to be mostly optimized for financial applications (candle diagrams, trend lines, etc.) and often they are not fast enough.

There are a few commercial alternatives available with steep price points (approx. >$10K/year) and prohibitive license terms, which require to rebuy for every new domain, which factually excludes SaaS applications.

Currently we use as a workaround victory with a custom X/Y chart component, which is clearly not ideal.

If you would add fast and simple charting components, which include true X/Y diagrams (line charts with "knots"), good usability (pinch/zoom, mobile support) and integrated into MUI, I think the engineering community would love it. I see use cases for web interfaces for embedded devices and data gathering/management portals.

[oliviertassinari]

@markus-kraeutner would you have a visual illustration of this need?

[oliviertassinari]

There are a few commercial alternatives available with steep price points (approx. >$10K/year) and prohibitive license terms, which require to rebuy for every new domain, which factually excludes SaaS applications.

@markus-kraeutner Do you mean Highcharts?

Note that we have released the first alpha version of our chart library: https://mui.com/x/react-charts/.