Line charts display data as a series of points connected by straight lines or smooth curves. Chartist's LineChart class provides extensive customization options for creating responsive line charts with areas, points, and multiple interpolation methods.
Creates line charts with optional areas and points, supporting multiple series and extensive customization.
/**
* Line chart implementation extending BaseChart
* @param query - CSS selector string or DOM element
* @param data - Chart data with labels and series
* @param options - Chart configuration options
* @param responsiveOptions - Responsive breakpoint configurations
*/
class LineChart extends BaseChart {
constructor(
query: string | Element | null,
data: LineChartData,
options?: LineChartOptions,
responsiveOptions?: ResponsiveOptions<LineChartOptions>[]
);
/** Update chart with new data and options */
update(data?: LineChartData, options?: LineChartOptions, override?: boolean): LineChart;
/** Detach chart from DOM and clean up */
detach(): LineChart;
}Usage Examples:
import { LineChart } from "chartist";
// Basic line chart
const chart = new LineChart('.chart-container', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
[5, 2, 4, 2, 0]
]
});
// Multi-series line chart
const multiSeriesChart = new LineChart('.chart-container', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
[5, 2, 4, 2, 0],
[1, 3, 2, 5, 4],
[2, 1, 3, 1, 2]
]
}, {
width: 400,
height: 300,
showArea: true,
showPoint: false,
fullWidth: true
});
// Line chart with smooth interpolation
const smoothChart = new LineChart('.chart-container', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [[5, 2, 4, 2, 0]]
}, {
lineSmooth: Interpolation.cardinal({
tension: 0.2
})
});Data structure for line charts supporting multiple series with optional metadata.
interface LineChartData {
/** Optional array of label strings for x-axis */
labels?: string[];
/** Array of data series - can be number arrays or SeriesObject */
series: (number[] | SeriesObject)[];
}
interface SeriesObject {
/** Optional name for the series */
name?: string;
/** Data points for the series */
data: number[];
/** Optional CSS class name for styling */
className?: string;
/** Optional metadata object */
meta?: any;
}Comprehensive configuration options for line chart appearance and behavior.
interface LineChartOptions {
/** Chart width in pixels */
width?: number;
/** Chart height in pixels */
height?: number;
/** Show area fill below lines */
showArea?: boolean;
/** Show points on data points */
showPoint?: boolean;
/** Show grid lines */
showGrid?: boolean;
/** Use full width of container */
fullWidth?: boolean;
/** Padding around chart content */
chartPadding?: ChartPadding;
/** Low value for chart bounds */
low?: number;
/** High value for chart bounds */
high?: number;
/** Line smoothing interpolation function */
lineSmooth?: InterpolationFunction | boolean;
/** X-axis configuration */
axisX?: AxisOptions;
/** Y-axis configuration */
axisY?: AxisOptions;
/** Series-specific options */
series?: { [name: string]: SeriesOptions };
/** CSS class names for styling */
classNames?: {
chart?: string;
chartLine?: string;
chartArea?: string;
chartPoint?: string;
chartLabel?: string;
chartGrid?: string;
};
}
interface AxisOptions {
/** Axis offset from chart edge */
offset?: number;
/** Show axis labels */
showLabel?: boolean;
/** Show axis grid */
showGrid?: boolean;
/** Label interpolation function */
labelInterpolationFnc?: (value: any, index: number) => string;
/** Reference value for axis positioning */
referenceValue?: number;
}
interface SeriesOptions {
/** Show area for this series */
showArea?: boolean;
/** Show points for this series */
showPoint?: boolean;
/** Line smoothing for this series */
lineSmooth?: InterpolationFunction | boolean;
}Event types specific to line charts for handling draw operations and interactions.
interface LineChartCreatedEvent {
type: 'created';
svg: Svg;
options: LineChartOptionsWithDefaults;
responsiveOptions: ResponsiveOptions[];
}
interface LineDrawEvent {
type: 'draw';
element: Svg;
path: SvgPath;
chartRect: ChartRect;
index: number;
seriesIndex: number;
group: Svg;
values: number[];
series: SeriesObject;
meta: any;
}
interface AreaDrawEvent {
type: 'draw';
element: Svg;
path: SvgPath;
chartRect: ChartRect;
index: number;
seriesIndex: number;
group: Svg;
values: number[];
series: SeriesObject;
meta: any;
}
interface PointDrawEvent {
type: 'draw';
element: Svg;
x: number;
y: number;
chartRect: ChartRect;
index: number;
seriesIndex: number;
group: Svg;
value: number;
series: SeriesObject;
meta: any;
}Event Usage Examples:
const chart = new LineChart('.chart-container', data);
// Handle line drawing
chart.on('draw', (data: LineDrawEvent) => {
if (data.type === 'line') {
// Customize line appearance
data.element.attr({
'stroke-width': '3px',
'stroke-dasharray': '5,5'
});
}
});
// Handle point drawing
chart.on('draw', (data: PointDrawEvent) => {
if (data.type === 'point') {
// Add custom point styling
data.element.attr({
'stroke-width': '2px',
'stroke': '#ff0000'
});
}
});Line charts support responsive options for different screen sizes and orientations.
const responsiveChart = new LineChart('.chart-container', data, {
showArea: true,
showPoint: false
}, [
// Mobile breakpoint
['screen and (max-width: 640px)', {
showPoint: true,
axisX: {
labelInterpolationFnc: (value, index) => {
// Show fewer labels on mobile
return index % 2 === 0 ? value : null;
}
}
}],
// Tablet breakpoint
['screen and (min-width: 641px) and (max-width: 1024px)', {
height: 250,
chartPadding: { top: 20, right: 20, bottom: 20, left: 20 }
}]
]);