Axes

The Chart axes provide a value scale for the plotted data series.

Depending on the series types you use, the Chart delivers:

  • A set of Category and Value axes (in Categorical and Radar series).
  • A set of X and Y axes (in Scatter and Polar series).
  • No axes (in Pie and Funnel series).

Categorical Chart Axes

Category axes are declared through the ChartCategoryAxisItem configuration components and placed in a ChartCategoryAxis collection. For more information on the available data-binding options, refer to the section on binding categories.

Value axes are declared through the ChartValueAxisItem configuration components and placed in a ChartValueAxis collection.

The following example demonstrates how to configure the Value and Category axes of the category Chart.

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

const seriesData = [20, 40, 45, 30, 50];
const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

const ChartContainer = () => (
    <Chart>
        <ChartValueAxis>
            <ChartValueAxisItem title={{ text: "Miles" }} min={0} max={100} />
        </ChartValueAxis>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} />
        </ChartCategoryAxis>
        <ChartSeries>
            <ChartSeriesItem data={seriesData} type="line" />
        </ChartSeries>
    </Chart>
);

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

Displaying Time Series

The Category axis delivers the following dedicated features which are tailored for displaying time series and get automatically activated when the axis is bound to Date objects:

To disable the Category axis features for displaying time series, set the axis mode to "category".

import React from 'react';
import ReactDOM from 'react-dom';

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

import { mockData } from './weather-data.js';

const data = mockData();

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Daily Max (&deg;C)" />
        <ChartSeries>
            <ChartSeriesItem
                type="column"
                field="TMax"
                categoryField="Date"
                data={data}
            />
        </ChartSeries>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem />
        </ChartCategoryAxis>
    </Chart>
);

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

Selecting Time Intervals

When the Category Chart is set to display time series, the Category axis divides into time slots. To set the time scale for these slots, define a "base unit", which can be hours, days, weeks, and so on. By default, the base unit matches the smallest time interval between the source dates. This approach ensures that all data points that are present in the original series will be displayed as they are.

You can use the baseUnit setting to manually select a different time unit. To display every N-th base unit, set the baseUnitStep option.

Setting the base unit to "fit" limits the total number of categories either to the set maxDateGroups value or, otherwise, to the default maxDateGroups value of 10.

import React from 'react';
import ReactDOM from 'react-dom';

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

import { DropDownList } from '@progress/kendo-react-dropdowns';
import { mockData } from './weather-data.js';

const data = mockData();
const baseUnits = [ 'days', 'weeks', 'months' ];

class ChartContainer extends React.Component {
  state = { baseUnit: 'weeks' }

  render() {
    const { baseUnit } = this.state;

    return (
        <div>
            <div className="example-config">
                  <label>
                      Base Unit
                  </label>
                  <DropDownList
                      style={{ marginLeft: 5 }}
                      value={baseUnit}
                      onChange={this.onChange}
                      data={baseUnits}
                  />
          </div>
          <Chart>
              <ChartTitle text="Daily Max (&deg;C)" />
              <ChartSeries>
                  <ChartSeriesItem
                    type="column"
                    field="TMax"
                    categoryField="Date"
                    data={data}
                  />
              </ChartSeries>
              <ChartCategoryAxis>
                  <ChartCategoryAxisItem baseUnit={baseUnit} />
              </ChartCategoryAxis>
          </Chart>
        </div>
    );
  }

  onChange = ( event ) => {
      this.setState({ baseUnit: event.target.value });
  }
}

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

Aggregating Data

When the Category Chart is set to display time series, it processes the data points for each time slot and produces a new point by using an aggregate function.

By default, the aggregate function returns the maximum value of the value fields. If the category contains only one point, aggregate returns the point without modification. Other aggregates, such as count and sum, produce their own value even if the category contains only one data point.

import React from 'react';
import ReactDOM from 'react-dom';

import {
  Chart,
  ChartTitle,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem
} from '@progress/kendo-react-charts';
import { DropDownList } from '@progress/kendo-react-dropdowns';

import { mockData } from './weather-data.js';

const data = mockData();
const aggregates = [ 'max', 'min' ];

class ChartContainer extends React.Component {
  state = { aggregate: 'max' }

  render() {
    const { aggregate } = this.state;

    return (
        <div>
            <div className="example-config">
                  <label>
                      Base Unit
                  </label>
                  <DropDownList
                      style={{ marginLeft: 5 }}
                      value={aggregate}
                      onChange={this.onChange}
                      data={aggregates}
                  />
          </div>
          <Chart>
              <ChartTitle text="Daily Max (&deg;C)" />
              <ChartSeries>
                  <ChartSeriesItem
                    type="column"
                    field="TMax"
                    categoryField="Date"
                    aggregate={aggregate}
                    data={data}
                  />
              </ChartSeries>
              <ChartCategoryAxis>
                  <ChartCategoryAxisItem baseUnit="weeks" />
              </ChartCategoryAxis>
          </Chart>
        </div>
    );
  }

  onChange = ( event ) => {
      this.setState({ aggregate: event.target.value });
  }
}

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

Limiting the Number of Labels

Normally, each date interval gets its own label. Labels may overlap and become illegible in densely populated charts. To work around this issue, set an upper limit to the number of labels for display by using the maxDivisions option.

import React from 'react';
import ReactDOM from 'react-dom';

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

import { mockData } from './weather-data.js';

const data = mockData();

const renderTooltip = (({ point }) => (<span>{ point.category.toDateString() }: { point.value }</span>));

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Daily Max (&deg;C)" />
        <ChartSeries>
            <ChartSeriesItem
                type="column"
                field="TMax"
                categoryField="Date"
                data={data}
            />
        </ChartSeries>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem maxDivisions={10} />
        </ChartCategoryAxis>
        <ChartTooltip render={renderTooltip} />
    </Chart>
);

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

You can save space and rotate the labels at a fixed or at an optimal ("auto") angle by using the labels.rotation option.

import React from 'react';
import ReactDOM from 'react-dom';

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

import { mockData } from './weather-data.js';

const data = mockData();

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Daily Max (&deg;C)" />
        <ChartSeries>
            <ChartSeriesItem
                type="column"
                field="TMax"
                categoryField="Date"
                data={data}
            />
        </ChartSeries>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem labels={{ format: 'd', rotation: 'auto' }} />
        </ChartCategoryAxis>
    </Chart>
);

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

Scatter Chart Axes

X axes are declared through the ChartXAxisItem configuration components and placed in a ChartXAxis collection.

Y axes are declared through the ChartYAxisItem configuration components and placed in a ChartYAxis collection.

The following example demonstrates how to configure the X and Y axes of the Scatter Chart.

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


const seriesData = [
    [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1],
    [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0]
];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="scatter" data={seriesData} />
        </ChartSeries>
        <ChartXAxis>
            <ChartXAxisItem title={{ text: 'Rainfall' }} />
        </ChartXAxis>
        <ChartYAxis>
            <ChartYAxisItem title={{ text: 'Windspeed' }} />
        </ChartYAxis>
    </Chart>
);

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

Displaying Dates

The Scatter Chart provides option for:

Using the X and Y Axes

The following example demonstrates how to use the X and Y axes of the Chart to display dates.

import React from 'react';
import ReactDOM from 'react-dom';

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

import { DropDownList } from '@progress/kendo-react-dropdowns';
import { mockData } from './weather-data.js';

const data = mockData();
const baseUnits = [ 'days', 'weeks', 'months' ];

class ChartContainer extends React.Component {
  state = { baseUnit: 'weeks' }

  render() {
    const { baseUnit } = this.state;

    return (
        <div>
            <div className="example-config">
                  <label>
                      Base Unit
                  </label>
                  <DropDownList
                      style={{ marginLeft: 5 }}
                      value={baseUnit}
                      onChange={this.onChange}
                      data={baseUnits}
                  />
          </div>
          <Chart>
              <ChartTitle text="Daily Max (&deg;C)" />
              <ChartSeries>
                  <ChartSeriesItem
                    type="scatterLine"
                    yField="TMax"
                    xField="Date"
                    data={data}
                  />
              </ChartSeries>
              <ChartXAxis>
                  <ChartXAxisItem baseUnit={baseUnit} />
              </ChartXAxis>
          </Chart>
        </div>
    );
  }

  onChange = ( event ) => {
      this.setState({ baseUnit: event.target.value });
  }
}

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

Selecting Time Intervals

When the Scatter Chart is set to display time series, its axis divides into time slots. To set the time scale for these slots, define a "base unit", which can be hours, days, weeks, and so on.

You can use the baseUnit setting to manually select a different time unit. To display every N-th base unit, set the baseUnitStep option.

The baseUnit setting for the Scatter Charts affects only the axis labels. This behavior contrasts the settings of the Categorical Chart axes that are used by the Chart to compute time series aggregates.

Default Axis Configuration

You can also apply settings to all Chart axes, regardless of their kind, by using the ChartAxisDefaults component.

The ChartAxisDefaults component supports the following child components:

The following example demonstrates how to set the default axis color and label font.

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

const seriesData = [20, 40, 45, 30, 50];
const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

const ChartContainer = () => (
    <Chart>
        <ChartAxisDefaults line={{ color: 'red' }} labels={{ font: '12pt sans-serif' }} />
        <ChartSeries>
            <ChartSeriesItem type="line" data={seriesData} />
        </ChartSeries>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} />
        </ChartCategoryAxis>
    </Chart>
);

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