D3 chart

For all common D3 chart properties, refer to D3 chart API.

Chart.Line

import { Chart } from '@semcore/ui/d3-chart';

LineChartProps

BaseChartProps<> & {...}

Name	Type	Description
groupKey	string	Field name that groups the data points
area	Record<, []>	Optional area data for rendering filled areas under lines
xScale	ScaleLinear<any, any> | ScaleTime<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
showDots	boolean	Controls whether to display dots on the line chart
curve		D3 curve factory for line interpolation
areaCurve		Curve factory specifically for area rendering
onClickLine	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a line

Line

It have children components Dots, Null.

import { Line } from '@semcore/ui/d3-chart';

<Line>
  <Line.Dots />
  <Line.Null />
</Line>;

LineProps

& {...}

Name	Type	Description
x	string	Field name from `data` array item for the XAxis
y	string	Field name from `data` array item for the YAxis
color	string	Line color
hide	boolean	Element hide property
curve		Curve method
duration	number	Animation duration in ms
transparent	boolean	Enables element transparency
patterns		Enables charts patterns that enhances charts accessibility
onClick	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a line