@mui/x-charts/SparkLineChart/SparkLineChart.d.ts

The community edition of MUI X Charts components.

import * as React from 'react';
import { ChartsColor } from "../colorPalettes/index.js";
import { ChartContainerProps } from "../ChartContainer/index.js";
import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
import { XAxis, YAxis } from "../models/axis.js";
import { LineSeriesType } from "../models/seriesType/index.js";
import { AreaPlotSlots, AreaPlotSlotProps } from "../LineChart/AreaPlot.js";
import { LinePlotSlots, LinePlotSlotProps } from "../LineChart/LinePlot.js";
import { MarkPlotSlots, MarkPlotSlotProps } from "../LineChart/MarkPlot.js";
import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "../LineChart/LineHighlightPlot.js";
import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
  /**
   * The xAxis configuration.
   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
   */
  xAxis?: XAxis;
  /**
   * The yAxis configuration.
   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
   */
  yAxis?: YAxis;
  axisHighlight?: ChartsAxisHighlightProps;
  /**
   * Type of plot used.
   * @default 'line'
   */
  plotType?: 'line' | 'bar';
  /**
   * Data to plot.
   */
  data: number[];
  /**
   * Formatter used by the tooltip.
   * @param {number} value The value to format.
   * @returns {string} the formatted value.
   * @default (value: number | null) => (value === null ? '' : value.toString())
   */
  valueFormatter?: (value: number | null) => string;
  /**
   * Set to `true` to enable the tooltip in the sparkline.
   * @default false
   */
  showTooltip?: boolean;
  /**
   * Set to `true` to highlight the value.
   * With line, it shows a point.
   * With bar, it shows a highlight band.
   * @default false
   */
  showHighlight?: boolean;
  /**
   * Set to `true` to fill spark line area.
   * Has no effect if plotType='bar'.
   * @default false
   */
  area?: LineSeriesType['area'];
  /**
   * @default 'linear'
   */
  curve?: LineSeriesType['curve'];
  /**
   * The margin between the SVG and the drawing area.
   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
   *
   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
   * @default 5
   */
  margin?: Partial<ChartMargin> | number;
  /**
   * Overridable component slots.
   * @default {}
   */
  slots?: SparkLineChartSlots;
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps?: SparkLineChartSlotProps;
  /**
   * Color used to colorize the sparkline.
   * @default rainbowSurgePalette[0]
   */
  color?: ChartsColor;
  /**
   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
   *
   * @default false
   */
  disableClipping?: boolean;
  /**
   * The clipped area offset in pixels.
   *
   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
   *
   * @default { top: 1, right: 1, bottom: 1, left: 1 }
   */
  clipAreaOffset?: {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
  };
}
/**
 * Demos:
 *
 * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
 *
 * API:
 *
 * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
 */
declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<SVGSVGElement>>;
export { SparkLineChart };