Line

Line Charts and Vertical Line Charts are Categorical charts which display continuous data as lines that pass through points defined by the values of their items.

Line Charts are useful for rendering trends over time or at equal time intervals, and for comparing sets of similar data.

Vertical Line Charts are functionally equivalent to Line Charts, but transpose the axes—the category axis is vertical and the value axis is horizontal.

Basic Usage

The following example demonstrates the Line Chart in action.

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

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

const ChartContainer = () => (
  <Chart>
    <ChartTitle text="Units sold" />
    <ChartCategoryAxis>
      <ChartCategoryAxisItem title={{ text: 'Months'}} categories={categories} />
    </ChartCategoryAxis>
    <ChartSeries>
      <ChartSeriesItem type="line" data={[123, 276, 310, 212, 240, 156, 98]} />
      <ChartSeriesItem type="line" data={[165, 210, 287, 144, 190, 167, 212]} />
      <ChartSeriesItem type="line" data={[56, 140, 195, 46, 123, 78, 95]} />
    </ChartSeries>
  </Chart>
);

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

The following example demonstrates the Vertical Line Chart in action.

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

const categories = ['Jan', 'Feb', 'Mar', 'Apr'];

const ChartContainer = () => (
  <Chart>
    <ChartCategoryAxis>
      <ChartCategoryAxisItem categories={categories} />
    </ChartCategoryAxis>
    <ChartSeries>
      <ChartSeriesItem type="verticalLine" data={[1, 2, 3, 5]} />
      <ChartSeriesItem type="verticalLine" data={[-1, -2, -3, -5]} />
    </ChartSeries>
  </Chart>
);

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

Choosing Line over Scatter Line Charts

Line Charts and Scatter Line Charts look visually the same because the data points in the plot area are connected with lines. However, they significantly differ in the way each series type plots the data it presents in the plot area.

In Line Charts, the vertical axis is a value axis and the horizontal axis is a category axis. This means that the category axis displays groupings of data and not numerical values. That is why the data points of the Line Charts are distributed as evenly-spaced coordinates.

The fundamental differences between the two series types make each a more suitable solution in particular scenarios. Line Charts are better to use when your project requires you to:

  • Use text labels along the horizontal axis.
  • Use a few numerical labels along the horizontal axis.
  • Use time scales along the horizontal axis.

Line Style

Line Charts enable you to render the lines between the points in different styles. To set the appearance of the lines, use the style option which provides the following available styles:

  • Normal—The default style which produces a straight line between data points.
  • Step—The style renders the connection between the data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • Smooth—The style causes the Line Chart to display a fitted curve through data points. It is suitable displaying data with a curve and for connecting the points with smooth instead of straight lines.

The following example demonstrates how to use the different types of lines.

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

const series = [20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5, 13, 3, 16, 1, 19, 1, 20, 2, 18, 5, 12, 7, 10, 8];

class ChartContainer extends React.Component {
  state = { style: 'normal' }

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

    return (
      <div>
        <DropDownList
            data={['normal', 'step', 'smooth']}
            value={style}
            onChange={(event) => {
                this.setState({
                    style: event.target.value
                });
            }}
        />
        <Chart>
          <ChartSeries>
            <ChartSeriesItem type="line" data={series} markers={{ visible: false }} style={style} />
          </ChartSeries>
        </Chart>
      </div>
    );
  }
};

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

In this article