Carregando…Carregando…Carregando…Carregando…ECharts multi-series line chart with area fill, dots, grid, legend, responsive width, a goal/average reference line and step interpolation.
$ npx kikitocn add line-chart@/lib/utils@/lib/echartsimport { LineChart } from "@/components/ui/cn/line-chart/LineChart";
export function LineChartExample() {
return (
<LineChart step="start" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
series* | LineChartSeries[] | — | Séries: { label, data: number[], color? } |
labels | string[] | undefined | Labels do eixo X |
height | number | 200 | Altura em px |
showArea | boolean | true | Preenche a área abaixo da linha |
showDots | boolean | true | Exibe pontos nos dados |
showGrid | boolean | true | Exibe linhas de grade horizontal |
showLegend | boolean | true | Exibe legenda das séries |
referenceLine | { value: number; label?: string; color?: string } | undefined | Linha horizontal de meta/média com rótulo (markLine nativo do ECharts) |
step | 'start' | 'middle' | 'end' | undefined | Interpolação em degrau em vez de reta entre pontos |
Line Chart — multi-series with area fill and legend
prop referenceLine — linha horizontal de meta/media com rotulo
prop step="middle" — degrau nativo do ECharts em vez de reta entre pontos