Skip to content
Edit this page

SparkLineChart API

API reference docs for the React SparkLineChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

    Import

    import SparkLineChart from '/packages/x-charts/src/SparkLineChart';
// or
import { SparkLineChart } from '/packages/x-charts/src';
    Learn about the difference by reading this guide on minimizing bundle size.

    Props

    dataRequired

    Data to plot.

    Type:

    Array<number>
    area

    Set to true to fill spark line area. Has no effect if plotType='bar'.

    Type:

    bool
    colors

    Color palette used to colorize multiple series.

    Type:

    Array<string> | func
    plotType

    Type of plot used.

    Type:

    'bar' | 'line'

    Default:

    'line'
    showHighlight

    Set to true to highlight the value. With line, it shows a point. With bar, it shows a highlight band.

    Type:

    bool
    showTooltip

    Set to true to enable the tooltip in the sparkline.

    Type:

    bool
    slotProps

    The props used for each component slot.

    Type:

    object

    Default:

    {}
    slots

    Overridable component slots.

    Type:

    object

    Default:

    {}
    valueFormatter

    Formatter used by the tooltip.

    Type:

    func

    Signature:

    function(value: number) => string
    • value The value to format.

    Returns: the formatted value.

    xAxis

    The xAxis configuration. Notice it is a single configuration object, not an array of configuration.

    Type:

    { axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, max?: Date | number, min?: Date | number, position?: 'bottom' | 'left' | 'right' | 'top', scaleType?: 'band' | 'linear' | 'log' | 'point' | 'pow' | 'sqrt' | 'time' | 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }
    The component cannot hold a ref.