@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
87 lines (86 loc) • 3.01 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 { ChartProps } from './ChartProps.js';
import { Surface } from '@progress/kendo-drawing';
import * as React from 'react';
/**
* Represents the [KendoReact Chart component](https://www.telerik.com/kendo-react-ui/components/charts/chart).
*
* @remarks
* Supported children components are: {@link ChartAxisDefaults}, {@link ChartCategoryAxis}, {@link ChartArea},
* {@link ChartLegend}, {@link ChartPane}, {@link ChartPaneDefaults}, {@link ChartPanes}, {@link ChartPlopArea}, {@link ChartPlopArea},
* {@link ChartSeries}, {@link ChartSeriesDefaults}, {@link ChartSubTitle}, {@link ChartTitle}, {@link ChartTooltip},
* {@link ChartValueAxis}, {@link ChartXAxis}, {@link ChartYAxis}, {@link ChartZoomable}.
*
* @example
* ```jsx
* import {
* Chart,
* ChartSeries,
* ChartSeriesItem,
* ChartCategoryAxis,
* ChartCategoryAxisItem,
* ChartTitle,
* ChartLegend
* } from '@progress/kendo-react-charts';
*
* const categories = [ 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 ];
* const series = [ {
* name: 'India',
* data: [ 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ]
* }, {
* name: 'Russian Federation',
* data: [ 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 ]
* }, {
* name: 'Germany',
* data: [ 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 ]
* }, {
* name: 'World',
* data: [ 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 ]
* } ];
*
* const ChartContainer = () => (
* <Chart>
* <ChartTitle text="Gross domestic product growth GDP annual" />
* <ChartLegend position="top" orientation="horizontal" />
* <ChartCategoryAxis>
* <ChartCategoryAxisItem categories={categories} startAngle={45} />
* </ChartCategoryAxis>
* <ChartSeries>
* {series.map((item, idx) => (
* <ChartSeriesItem
* key={idx}
* type="column"
* data={item.data}
* name={item.name}
* />))}
* </ChartSeries>
* </Chart>
* );
* ```
*/
export declare class Chart extends React.Component<ChartProps, {}> {
private _baseChart;
/**
* @hidden
*/
get chartInstance(): any;
/**
* The Drawing `Surface` of the Chart.
*/
get surface(): Surface | null;
/**
* The DOM element of the Chart.
*/
get element(): HTMLDivElement | null;
/**
* @hidden
*/
render(): any;
private getTarget;
}