Skip to main content

LineChart


Example

Page APage BPage CPage DPage EPage FPage G025005000750010000
uv
pv
amt
<LineChart
height={300}
dataKey="name"
categories={["uv", "pv", "amt"]}
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,
},
]}
/>

Props

NameTypeDefault ValueRequiredDescription
dataColors("brandPrimary" | "brandSecondary" | "brandTertiary" | "backgroundPrimary" | "backgroundSecondary" | "backgroundOverlay" | "backgroundPrimaryInverse" | "backgroundSecondaryInverse" | ... 88 more ... | "brightPink")[]No
disableAnimationbooleanNo
hideLegendbooleanNo
hideTooltipbooleanNo
dataRecord<D | C, unknown>[]Yes
categoriesC[]Yes
dataKeystringYes
hideXAxisbooleanNo
hideYAxisbooleanNo
lineType"linear" | "step" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "stepBefore" | "stepAfter"monotoneNo
xAxisValueFormatterValueFormatterNo
yAxisValueFormatterValueFormatterNo

Related components