Appearance

The colors of the Chart are derived from the active Kendo UI theme. For customization of the themes, refer to the customizing themes article.

Setting the Dimensions

By default, the Chart is 400px high and as wide as its container. To set the dimensions of the Chart, use inline styles and CSS.

import {
  Chart,
  ChartSeries,
  ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [1, 2, 3, 5];

const ChartContainer = () => (
  <Chart style={{ width: 300, height: 200 }} >
    <ChartSeries>
      <ChartSeriesItem data={seriesData} />
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
  document.querySelector('my-app')
);

Limiting the Displayed Range

To limit the range which is displayed by the Chart:

  1. Set the min and max options of the category axis.
  2. Enable panning and zooming, so that the user is able to see the rest of the data.
import {
  Chart,
  ChartTitle,
  ChartTooltip,
  ChartLegend,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartSeries,
  ChartSeriesItem
} from '@progress/kendo-react-charts';

const baseYear = 2000;
const generateData = () => {
    const data = {
      categories: [],
      series: {
        name: 'My data over time',
        data: []
      }
    };

    for (let i = 0; i < 200; i++) {
      data.categories.push(baseYear + i);
      data.series.data.push(Math.floor(Math.random() * 200));
    }

    return data;
};

const ChartContainer = () => {
  const data = generateData();

  return (
    <Chart pannable={{ lock: 'y' }} zoomable={{ mousewheel: { lock: 'y' } }}>
      <ChartTitle text="My line chart" />
      <ChartTooltip format="{0}" />
      <ChartLegend position="bottom" orientation="horizontal" />
      <ChartCategoryAxis>
        <ChartCategoryAxisItem categories={data.categories} max={20} labels={{ rotation: 'auto' }} />
      </ChartCategoryAxis>
      <ChartSeries>
        <ChartSeriesItem data={data.series.data} type="line" style="smooth" name={data.series.name} />
      </ChartSeries>
  </Chart>
  );
};

ReactDOM.render(
  <ChartContainer />,
  document.querySelector('my-app')
);

In this article