series
defines configuration of chart series
series?: SeriaConfig[];
Example
const chart = new dhx.Chart("chart_container", {
type:"bar",
scales: {
"bottom" : {
text: "month"
},
"left" : {}
},
series: [
{
id: "A",
value: "company A",
fill: "#394E79",
stacked: stacked,
color: "none"
},
{
id: "B",
value:"company B",
fill: "#5E83BA",
stacked: stacked,
color: "none"
}
]
});
The list of config options for series (for charts with scales)
tip
You can apply the options below to configure series for charts with the following types: "line", "spline", "bar", "x-bar", "area", "splineArea", "radar", "scatter".
id | (string) the id of a series |
type | (string) the type of a chart |
active | (boolean) defines, whether a series is active/inactive |
pointColor | (string) the color of data item points in a series |
dashed | (boolean) sets the dashed type for a series line |
strokeWidth | (number) the width of the chart outline |
value | (string) the name of a data set property to map data values to |
pointType | (string) sets the type of the point of the data item. There are the following point types:"circle","rect","triangle","rhombus","simpleRect","simpleCircle","empty" Related Sample: Chart. Point types |
css | (string) adds a style class for a series |
color | (string) the color of the series outline |
tooltip | (boolean) shows values of data items in tooltips, true by default |
tooltipTemplate | (function) a function that defines a template for showing values of data items in tooltip Related Sample: Chart. Tooltip template |
Options specific for Area, Bar and Radar charts
fill | (string) the color of the series filling in Hex format |
alpha | (number) transparency of the series filling |
Options specific for Bar charts
gradient | (function) a function that defines a color gradient for bars Related Sample: Chart. Bar chart. Gradient |
baseLine | (number) sets a base line for rendering data items (bars) Related Sample: Chart. Base line |
stacked | (boolean) defines whether a stacked chart will be rendered Related Sample: Chart. Stacked chart |
barWidth | (number) sets the width of bars |
showText | (boolean) shows/hides values of data items in bars |
showTextTemplate | (function) a function that specifies the template for showing values of data items in bars Related Sample: Chart. Show text |
showTextRotate | (number|string) the degree of rotation of text values of data items in bars Related Sample: Chart. Show text |
The list of config options for series (for charts without scales: Pie, Pie3D, Donut)
tip
You can apply the options below to configure series for charts with the following types: "pie", "pie3D", "donut".
id | (string) the id of a series |
text | (string) the name of the data set property to map labels of data values to |
value | (string) the name of the data set property to map data values to |
color | (string) points to the property in a data set that defines the color of a pie/donut sector |
useLines | (boolean) shows/hides lines used to "connect" chart sectors with labels |
subType | (string|boolean) specifies the subtype of a chart: "basic"|"percentOnly"|"valueOnly" |
stroke | (string) the color of lines between sectors of a chart |
strokeWidth | (number) the width of lines between sectors of a chart |
monochrome | (boolean|string) colors chart sections in the shades of a color specified as a value of this property (e.g. "blue", "red"). It can be also set as HEX code (#ff00ff), as RGB code (rgb(255, 15, 0)) or as RGBA color code (rgba(255, 15, 0, 0.2)). |
paddings | (number) paddings between a chart and its initial position |
showText | (boolean) shows/hides values of data items on the chart (Pie, Pie3D) |
showTextTemplate | (function) a function that specifies the template for showing values of data items on the chart (Pie, Pie3D) |
The list of config options for series (for charts without scales: Treemap)
tip
You can apply the options below to configure series for charts with the "treeMap" type.
text | (string) the name of the data set property to map labels of data values to. The index of the option is 0 (item[0]). |
value | (string) the name of the data set property to map data values to. The index of the option is 1 (item[1]). |
direction | (string) defines the arrangement of tiles inside a chart ("desc" (by default) - from larger to smaller value, "asc" - from smaller to larger value) |
stroke | (string) the color of lines between tiles |
strokeWidth | (number) the width of lines between tiles inside a group in pixels, 2 by default. The width of lines between the groups is 4 (=2px*2) by default |
paddings | (number) paddings between a chart and its initial position |
tooltipTemplate | (function) a function that defines a template for showing values of data items in tooltip Related Sample: Chart. Treemap chart initialization |
showTextTemplate | (function) a function that specifies the template for showing values of data items on the chart |