Skip to main content

​
Chart

The Chart component renders simple charts and graphs. Currently supports bar, line, and pie charts.

​
Usage

<Chart 
  type="bar" 
  data={[
    { label: "Jan", value: 10 },
    { label: "Feb", value: 20 },
    { label: "Mar", value: 15 }
  ]} 
/>

​
Props

​
type
string
required
Type of chart: bar, line, pie, doughnut.
​
data
array
required
Array of data points { label: string, value: number, color?: string }.
​
height
number
default:"200"
Height of the chart in pixels.
​
xAxis
boolean
default:"true"
Show X-axis labels.
​
yAxis
boolean
default:"true"
Show Y-axis labels.

​
Examples

​
Pie Chart

<Chart 
  type="pie" 
  data={[
    { label: "Mobile", value: 60, color: "blue" },
    { label: "Desktop", value: 40, color: "green" }
  ]} 
  height={250} 
/>