@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
93 lines (92 loc) • 2.61 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { SparklineProps } from './SparklineProps.js';
import { Surface } from '@progress/kendo-drawing';
import * as React from 'react';
/**
* The root Sparkline component.
*
* @remarks
* Supported children components are: {@link ChartValueAxis}.
*
* @example
* ```jsx
* import {
* Sparkline,
* ChartValueAxis,
* ChartValueAxisItem
* } from '@progress/kendo-react-charts';
*
* const sparklineData = [ 936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007 ];
* const bulletData = [ 21, 23 ];
* const bulletValueAxis = {
* min: 0,
* max: 30,
* plotBands: [{
* from: 0, to: 15, color: '#787878', opacity: 0.15
* }, {
* from: 15, to: 22, color: '#787878', opacity: 0.3
* }, {
* from: 22, to: 30, color: '#787878', opacity: 0.15
* }]
* };
*
* const SparklineContainer = () => (
* <ul>
* <li>
* Base Sparkline chart
* <Sparkline data={sparklineData} />
* </li>
* <li>
* Bar/Column type Sparkline chart
* <Sparkline data={sparklineData} type="column" />
* </li>
* <li>
* Area type Sparkline chart
* <Sparkline data={sparklineData} type="area" />
* </li>
* <li>
* Pie type Sparkline chart
* <Sparkline data={sparklineData} type="pie" />
* </li>
* <li>
* Bullet type Sparkline chart
* <Sparkline data={bulletData} type="bullet">
* <ChartValueAxis>
* <ChartValueAxisItem {...bulletValueAxis} />
* </ChartValueAxis>
* </Sparkline>
* </li>
* </ul>
* );
* ```
*/
export declare class Sparkline extends React.Component<SparklineProps, {}> {
private _baseChart;
/**
* @hidden
*/
get chartInstance(): any;
/**
* The Drawing `Surface` of the Sparkline.
*/
get surface(): Surface | null;
/**
* The DOM element of the Sparkline.
*/
get element(): HTMLDivElement | null;
/**
* @hidden
*/
deriveOptionsFromParent: (options: any) => any;
/**
* @hidden
*/
render(): any;
private getTarget;
}