Skip to content
DexCode

Charts

Use the built-in Chart component to visualize data in your DexCode slides.

Chart Component

DexCode includes a unified Chart component powered by Recharts. Specify the chart type via the type prop.

Bar Chart

mdx
<Chart
  type="bar"
  data={[
    { name: "Jan", value: 120 },
    { name: "Feb", value: 180 },
    { name: "Mar", value: 250 },
    { name: "Apr", value: 200 },
  ]}
/>

Line Chart

mdx
<Chart
  type="line"
  data={[
    { name: "W1", value: 10 },
    { name: "W2", value: 25 },
    { name: "W3", value: 30 },
    { name: "W4", value: 45 },
  ]}
/>

Pie Chart

mdx
<Chart
  type="pie"
  data={[
    { name: "Desktop", value: 55 },
    { name: "Mobile", value: 35 },
    { name: "Tablet", value: 10 },
  ]}
  colors={["#02001A", "#4A90D9", "#50C878"]}
/>

Area Chart

mdx
<Chart
  type="area"
  data={[
    { name: "Q1", value: 1200 },
    { name: "Q2", value: 1800 },
    { name: "Q3", value: 2400 },
    { name: "Q4", value: 3200 },
  ]}
/>

Props