Line Chart
A line chart is a visual representation that shows quantitative data as a series of points connected by straight line segments.
Props#
LineChart#
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | Record<string, string | number>[] | The data to be displayed in the chart. | |
| allowDecimals | boolean | Show decimals on the y-axis. | |
| animationDuration | number | Animation duration in milliseconds. | |
| categories | string[] | The data keys to be displayed in the chart. | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Children to render. | |
| colors | string[] | The colors to use for each category. | |
| connectNulls | boolean | Whether to connect null values. | |
| curveType | CurveType | The curve type of the line. | |
| height | ResponsiveValue<number | "px" | (string & {}) | "max" | "min" | "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | ... 56 more ... | "container.2xl"> | The height of the chart. | |
| index | string | 'date' | The y-axis data key to use. |
| intervalType | type ONLY_FOR_FORMAT =
| number
| "preserveStartEnd"
| "equidistantPreserveStart"
| "preserveStart"
| "preserveEnd" | If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically. | |
| legendHeight | number | Height of the legend. | |
| maxValue | number | "auto" | 'auto' | The upper bound of the y-axis. |
| minValue | number | "auto" | 0 | The lower bound of the y-axis. |
| showAnimation | boolean | Wether to show the animation or not. | |
| showGrid | boolean | Wether to show the grid or not. | |
| showLegend | boolean | Wether to show the legend or not. | |
| showTooltip | boolean | Wether to show the tooltip or not. | |
| showXAxis | boolean | Wether to show the x-axis or not. | |
| showYAxis | boolean | Wether to show the y-axis or not. | |
| startEndOnly | boolean | Only show the start and end ticks on the x-axis. | |
| strokeWidth | string | number | The width of the line. | |
| tooltipContent | (props: TooltipProps<any, any>) => ReactNode | Render custom tooltip content. | |
| valueFormatter | (value: number) => string | Format the value of the x-axis. | |
| yAxisWidth | number | Width of the y-axis labels. |
Was this helpful?