Line Chart

Introduction

A line chart is constructed by connecting a series of data points to reveal trends. Line charts are used to analyze the trends of things changing over time or sequential categories. If there is more than one group of data, a line chart can be used to analyze the interaction and impact of multiple data groups changing over time or categorical sequences. The direction of the line chart indicates positive/negative changes, and the slope of the line chart indicates the degree of change.

In VChart, you can display the data trends of different categories through Line Chart Configuration. As shown in the example below, it displays the changing trend of cigarette consumption in developed countries:

In the Line Chart Example shown above, you need to use the following key configurations:

seriesField property is used to declare the field involved in color mapping
legends property is used for configuring the legend

Chart Composition

Line charts are composed of point elements, line elements, axis components, and other components.

Point elements and line elements are the basic elements of a line chart, and the related drawing configurations are essential:

lineChart.type: Chart type, the type of line chart is 'line'
lineChart.data: Data source for chart drawing
lineChart.xField: Continuous time interval or ordered category field, mapping the x coordinate of the element
lineChart.yField: Numeric field, mapping the y coordinate of the element

Axis components, tooltip information, and other components that serve as auxiliary chart display components are optional configurations with default effects and functionality:

lineChart.axes: Axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration can be found in VChart Axis Component Configuration
lineChart.tooltip:tooltip information, displayed by default during interaction, detailed configuration can be found in VChart Tooltip Information Component Configuration
For more component configurations, see VChart lineChart Configuration

Quick Start

Key Configurations

type: Chart type, the type of line chart is 'line'
xField property declares a continuous time interval or ordered category field
yField property declares a numeric field

Chart Features

Data

Data Structure

A discrete or time field, such as: month
(time fields only support timestamp format and need to be configured with axes.type: 'time' in the coordinate axis)
A numeric field, such as: temperature

An example of a group of data for months and temperatures is defined below:

data: [
  {
    name: 'line',
    values: [
      {
        month: 'January',
        temperature: 8
      },
      {
        month: 'February',
        temperature: 9
      },
      {
        month: 'March',
        temperature: 11
      },
      {
        month: 'April',
        temperature: 14
      }
    ]
  }
];

Discontinuous Data Scenarios

Line charts with empty values in the data. Users can configure lineChart.invalidType to specify the connection method for non-compliant data points such as null, undefined, etc.

lineChart.invalidType	Description
'break'	Break at this data point
'link'	Ignore this point and maintain continuity
'zero'	The default value for this point is 0
'ignore'	Do not handle

In this example, we show the change in the number of gold, silver, and bronze medals at the Olympic Games over time, with empty data in 1980.

Elements and Styles

The main elements used in line charts are two: point and line. They correspond to chart elements like markers and lines. Each mark can be individually configured for its style, see the detailed configuration: lineChart.line and lineChart.point

Dashed Lines at the End

In chart making, there are often some personalized requirements. Taking the estimated trend of fund price fluctuations as an example, we hope that the estimated increase and decrease range will be connected by dashed lines and distinguished by different colors.

Marker Point Style

Marker points support custom shapes and sizes. We set the marker points to slightly larger triangles through configurations. For specific configurations, see Configuration Documentation

point: {
    style: {
      shape: 'triangle',
       size: 7
    }
  }

Linear Gradient

By setting lineChart.point: {visible: false} to hide marker points, and configuring lineChart.line.style.stroke: { gradient: 'linear' } for gradient colors, we can achieve the effect of a gradient line.

Gradient Color - Color Segmentation

By controlling the offset value of the gradient color, we can achieve a chart that displays color segmentation for different layers, such as warning colors for upper and lower boundaries.