Dataset-specific options can be applied to control attributes, such as color and width of each line. Adding a borderColor attribute to the dataset will set the color of the line (and legend box), as follows:
let dataObj = {
labels: labels,
datasets: [{
data: values,
borderColor: 'hsla(300,100%,50%,1)'
backgroundColor: 'transparent';
}]
}
The following chart shows the effect of setting borderColor and backgroundColor for a dataset. This configuration only affects one dataset. You can also configure properties that affect all datasets. In this example, the legend was also removed using the options configuration (explained in a separate section). You can see the full code in LineArea/line-2.html, as shown in the following screenshot:
The following listed dataset properties can be declared for each object of the datasets array. Many are also shared by other charts that display numerical data, such as radar, scatter, and bubble charts:
|
Property |
Value |
Description |
|
data |
Number[] |
An array of numbers containing the data to display (mandatory). |
|
label |
String |
A label for the dataset (appears in legend and tooltips). |
|
backgroundColor |
A CSS color property value string |
The fill color under (or above) the line. Position depends on the fill property. |
|
borderColor |
A CSS color property value string |
The color of the line. |
|
borderWidth |
Number |
The width of the line in pixels. |
|
borderDash |
Number[] |
The canvas setLineDash method. An array describing the width of alternated line and space. For example, [5, 10] will create a dashed line with 5 pixel dashes and 10 pixel spaces. |
|
borderDashOffset |
Number |
The canvas lineDashOffset property. An offset for line dashes. If zero (default), a [10,10] dash will start with a 10 pixel line. If 10, it will start with the 10 pixel space. If 5, it will start with a 5 pixel line, followed by a 10 pixel space, 10 pixel line, and so on. |
|
borderJoinStyle |
'bevel', 'round', or 'miter' (default) |
The canvas lineJoin property. |
|
borderCapStyle |
'butt' (default), 'round', or 'square' |
The canvas lineCap property. |
|
pointBackgroundColor |
Color or Color[] |
The background color of the point. |
|
pointBorderColor |
Color or Color[] |
The border color of the point. |
|
pointBorderWidth |
Number or Number[] |
The border width of the point. |
|
pointRadius |
String or String[] |
The radius of the point. |
|
pointStyle |
circle (default), cross, line, crossRot, dash, rectRounded, rectRot, star, or triangle |
The style of the point. A string or a DOM reference to an Image object. |
|
pointHoverBackgroundColor |
Color or Color[] |
The background color of the point when the mouse hovers over it. |
|
pointHoverBorderColor |
Color or Color[] |
The border color of the point when the mouse hovers over it. |
|
pointHoverBorderWidth |
Number or Number[] |
The width of the point when the mouse hovers over it. |
|
pointHoverRadius |
Number or Number[] |
The radius of the point when the mouse hovers over it. |
|
pointHitRadius |
Number or Number[] |
The invisible radius of the point that reacts to the mouse hover (to show a tooltip). |
|
cubicInterpolationMode |
'default' or 'monotone' |
The default algorithm employs a cubic weighted interpolation. It doesn't guarantee monotonicity (so, if values increase or decrease, the default algorithm may deviate from this behavior). |
|
lineTension |
Number |
The cubic bezier line tension (this applies only to default interpolation mode). If zero, the chart will draw straight lines. |
|
fill |
false, start, end, origin, or dataset index (relative or absolute) |
This property describes how the space between lines is filled. false turns the feature off. start fills the space above or before the line, end fills the opposite space, origin fills to the origin of the chart, and index values fill the space between two datasets. A number represents the absolute index of a dataset. A string containing a signed number (for example: +2) represents a relative dataset (for example: the preceding two datasets). |
|
spanGaps |
'bottom', 'left', 'top', or 'right' |
If false, a null value or NaN (not zero) will cause a break in the line. The default is false. |
|
showLine |
Boolean |
If false, the line for this dataset is not shown (only points will be displayed). |
|
steppedLine |
true = 'before', false (default), or 'after' |
Draws line as a sequence of steps. If true or before, the initial point is used. If after, the final value is used. The default is false, which disables this algorithm. |
|
yAxisID and xAxisID |
An axis ID (see Chapter 7, Advanced |
This is used in axis configuration. |
Data points represent the actual data in a dataset, and serve as an anchor for tooltips. There are several different data point styles that can be selected with the pointStyle property. These are shown as follows:
Data points can also configure radius, background color, border color, and tooltip behaviors. In a line chart, only the points represent actual values. The lines are just estimates. Depending on the kind of data you are displaying or the amount of points you have to display, it may not make sense to show them. You might also want to render them differently.
There are several options to control the algorithm that draws the lines. The lineTension property is a number (usually between 0 and 0.5) that configures the cubic Bezier interpolation of each line, drawing smooth curves between each point. If you set it to zero, the chart will draw straight lines, as demonstrated in the following diagram:
If you are plotting discrete values, you may prefer to draw the lines as steps. You can place the step on a line based on the first or the second point of the line segment by choosing between the before or after strategies for the steppedLine property. The effects are shown as follows:
