Line Chart

Line Chart component for Toolpad Core applications.

Toolpad Core extends X Charts with data provider support. Toolpad Core charts automatically load data and adopt defaults for labels and formatting.

Basic example

Add a data provider to a chart and its data is automatically loaded in the chart.

<LineChart height={250} dataProvider={myData} />

<LineChart height={250} dataProvider={myData} />

Press Enter to start editing

Error and loading states are automatically handled. Errors from the data provider are shown in an overlay:

The chart automatically adopts configuration from the data provider. When you pick a dataKey for an axis or a series, the chart automatically infers default values for series and axis options. The Toolpad Core components accept all properties that the X components offer. SO to customize the chart further, you can override these defaults and add extra options as you need.

<LineChart
  height={250}
  dataProvider={myData}
  series={[
    {
      dataKey: 'value',
      label: 'Custom Label',
      color: 'red',
      area: true,
      showMark: false,
    },
  ]}
/>

<LineChart
  height={250}
  dataProvider={myData}
  series={[
    {
      dataKey: 'value',
      label: 'Custom Label',
      color: 'red',
      area: true,
      showMark: false,
    },
  ]}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<LineChart />

Line Chart

Basic example

Customization

API