Datasets Style
datasets
datasets 設定上,主要是label 、線色、線寬、fill等設定。
Dataset Configuration
Name
Type
Description
label
string
The label for the dataset which appears in the legend and tooltips.
clip
number
|object
How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
order
number
The drawing order of dataset. Also affects order for stacking, tooltip and legend.
stack
string
The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to dataset type
.
parsing
boolean
|object
How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
hidden
boolean
Configure the visibility of the dataset. Using hidden: true
will hide the dataset from being rendered in the Chart.
Elements
Point Configuration
Point elements are used to represent the points in a line, radar or bubble chart.
Namespace: options.elements.point
, global point options: Chart.defaults.elements.point
.
Name
Type
Default
Description
radius
number
3
Point radius.
string
|Image
'circle'
Point style.
rotation
number
0
Point rotation (in degrees).
backgroundColor
Chart.defaults.backgroundColor
Point fill color.
borderWidth
number
1
Point stroke width.
borderColor
'Chart.defaults.borderColor
Point stroke color.
hitRadius
number
1
Extra radius added to point radius for hit detection.
hoverRadius
number
4
Point radius when hovered.
hoverBorderWidth
number
1
Stroke width when hovered.
#Point Styles
The following values are supported:
'circle'
'cross'
'crossRot'
'dash'
'line'
'rect'
'rectRounded'
'rectRot'
'star'
'triangle'
If the value is an image, that image is drawn on the canvas using drawImage .
#Line Configuration
Line elements are used to represent the line in a line chart.
Namespace: options.elements.line
, global line options: Chart.defaults.elements.line
.
Name
Type
Default
Description
tension
number
0
Bézier curve tension (0
for no Bézier curves).
backgroundColor
Chart.defaults.backgroundColor
Line fill color.
borderWidth
number
3
Line stroke width.
borderColor
Chart.defaults.borderColor
Line stroke color.
borderCapStyle
string
'butt'
borderDash
number[]
[]
borderDashOffset
number
0.0
borderJoinStyle
string
'miter'
capBezierPoints
boolean
true
true
to keep Bézier control inside the chart, false
for no restriction.
cubicInterpolationMode
string
'default'
fill
boolean
|string
false
stepped
boolean
false
true
to show the line as a stepped line (tension
will be ignored).
#Bar Configuration
Bar elements are used to represent the bars in a bar chart.
Namespace: options.elements.bar
, global bar options: Chart.defaults.elements.bar
.
Name
Type
Default
Description
backgroundColor
Chart.defaults.backgroundColor
Bar fill color.
borderWidth
number
0
Bar stroke width.
borderColor
Chart.defaults.borderColor
Bar stroke color.
borderSkipped
string
'start'
Skipped (excluded) border: 'start'
, 'end'
, 'bottom'
, 'left'
, 'top'
or 'right'
.
borderRadius
number
|object
0
The bar border radius (in pixels).
string
|Image
'circle'
Style of the point for legend.
#Arc Configuration
Arcs are used in the polar area, doughnut and pie charts.
Namespace: options.elements.arc
, global arc options: Chart.defaults.elements.arc
.
Name
Type
Default
Description
angle
- for polar only
number
circumference / (arc count)
Arc angle to cover.
backgroundColor
Chart.defaults.backgroundColor
Arc fill color.
borderAlign
string
'center'
Arc stroke alignment.
borderColor
'#fff'
Arc stroke color.
borderWidth
number
2
Last updated