Line Chart Card

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="line-chart-card"/>;}

Sharp corners

Set shape="sharp" to connect measurements with straight segments. The gradient, point markers and hover behavior remain the same. This is useful when the connecting line should avoid suggesting smooth interpolation between measurements.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="line-chart-card" shape="sharp"/>;}