series
Required. Defines configuration of chart series
series: object[];
Example
const chart = new dhx.Chart("chart_container", {
type: "bar",
scales: {
"bottom": {
text: "month"
},
"left": {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "A",
color: "#81C4E8",
fill: "#81C4E8",
label: "Company A",
},
{
id: "B",
value: "B",
color: "#74A2E7",
fill: "#74A2E7",
label: ({ id }) => `Company ${id}`,
},
{
id: "C",
value: "company C",
color: "#5E83BA",
fill: "#5E83BA"
}
]
});
The list of config options for series (for charts with scales)
info
You can apply the options below to configure series for charts with the following types: "line", "spline", "bar", "xbar", "area", "splineArea", "radar", "scatter".
Usage
series: [
{
id: string,
value: string,
type?: "line" | "spline" | "bar" | "xbar" | "area" | "splineArea" | "radar"| "scatter",
label?: ((seria: ISeriaConfig) => string) | string,
active?: boolean,
color?: string | ((item: any) => string), // only Bar and X-Bar charts accept a function
css?: string,
dashed?: boolean,
pointColor?: string,
pointType?: "rect" | "circle" | "triangle" | "rhombus" | "simpleRect" | "simpleCircle" | "empty",
scale?: "left" | "right" | "top" | "bottom",
scales?: ScaleType[],
strokeWidth?: number,
tooltip?: boolean,
tooltipTemplate?: (points: any[]) => string,
}
]
Description
| id | (required) the id of a series |
| value | (required) the name of a data set property to map data values to |
| type | (optional) the type of a chart |
| label | (optional) allows setting the text of the series legend. If the label isn't set, the value of the value property is used as a legend's text. The config can be defined as a string or as a function that takes the current series configuration as an argument and returns a string Related Sample: Chart. Bar chart initialization |
| active | (optional) defines, whether a series is active/inactive |
| color | (optional) the color of the series outline. Bar and X-Bar charts don't draw an outline: in these charts, color sets the color of bars if you don't specify fill, and the outline of the series marker in the legend. For Bar and X-Bar charts, you can also set it as a function: the chart calls it with a data item, and the function returns the color of the bar for that item. Read the details Related Sample: Chart. Dynamic colors. Highlight highest and lowest |
| css | (optional) adds a style class for a series |
| dashed | (optional) sets the dashed type for a series line |
| pointColor | (optional) the color of data item points in a series |
| pointType | (optional) 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 |
| scale | (optional) binds the series to the value scale its values are measured against. Check the scale section |
| scales | (optional) sets the pair of scales a series is drawn against. Check the scales section |
| strokeWidth | (optional) the width of the chart outline |
| tooltip | (optional) shows values of data items in tooltips, true by default |
| tooltipTemplate | (optional) a function that defines a template for showing values of data items in tooltip Related Sample: Chart. Tooltip template |
Options for a dual axis chart
The scale and scales properties name the scales of a series, which allows a chart to render two value scales at once, each with its own dimension. They apply to the series of the charts with scales: Line, Spline, Bar, X-Bar, Area, SplineArea and Scatter. Check the Dual axis chart section of the guide for the details.
scale
scale?: "left" | "right" | "top" | "bottom"
The scale property names the value scale only, as the chart applies the argument scale automatically. The direction of the value scale follows the type of the series:
"left"or"right"for the Line, Spline, Bar, Area, SplineArea and Scatter series"bottom"or"top"for the X-Bar series
The "left" and the "right" scales share the vertical direction, the "bottom" and the "top" ones the horizontal direction. A chart becomes a dual axis one when it declares both scales of a direction.
The default value scale is "left" ("bottom" for X-Bar). If a chart does not have it, the series falls back to the opposite scale.
const chart = new dhx.Chart("chart_container", {
scales: {
bottom: { text: "month" },
left: { title: "Sales, $" },
right: { title: "Profit ratio", min: 1.2, max: 1.45 }
},
series: [
{ id: "S", type: "line", value: "sales", color: "#2A9D8F" },
{ id: "M", type: "line", value: "margin", color: "#E76F51", scale: "right" }
]
});
The property set to the position of the perpendicular scale, e.g. scale: "top" for a Bar series, throws a TypeError that specifies the type of the series and the positions it can be bound to.
Related sample: Chart. Dual axis. Two line series
Related article: Value scale of a series
scales
scales?: ScaleType[]
The scales property is the full form of the binding. It is needed when a series specifies not only its value scale, but also its argument scale:
series: [
{ type: "line", value: "ratio", scales: ["top", "right"] } // the categories on top, the values on the right
]
The order of the positions in the array does not matter, as the direction of each position defines its role. The array has to name exactly one value scale of the series, and the remaining position becomes the argument scale.
If a series has both properties, scales takes priority and the chart ignores scale.
Related article: Naming both scales of a series
Options specific for Area, Bar and Radar charts
Usage
series: [
{
..., // config options for series (for charts with scales)
fill?: string | ((item: any) => string), // only Bar and X-Bar charts accept a function
alpha?: number,
}
]
Description
| fill | (optional) the color of the series filling in Hex format. For Bar and X-Bar charts, you can also set it as a function: the chart calls it with a data item, and the function returns the fill color of the bar for that item. Area, SplineArea and Radar charts accept only a string. Read the details Related Samples: Chart. Dynamic colors. Conditional fill by value, Chart. Dynamic colors. Gradient fill |
| alpha | (optional) transparency of the series filling |
Options specific for Bar charts
Usage
series: [
{
..., // config options for series (for charts with scales)
barWidth?: number,
baseLine?: number,
gradient?: (color: string) => any,
showText?: boolean,
showTextRotate?: number | string,
showTextTemplate?: (points: any) => string,
stacked?: boolean | string,
}
]
Description
| barWidth | (optional) sets the width of bars |
| baseLine | (optional) sets a base line for rendering data items (bars) Related Sample: Chart. Base line |
| gradient | (optional) a function that defines a color gradient for bars Related Sample: Chart. Bar chart. Gradient |
| showText | (optional) shows/hides values of data items in bars |
| showTextRotate | (optional) the degree of rotation of text values of data items in bars Related Sample: Chart. Show text |
| showTextTemplate | (optional) a function that specifies the template for showing values of data items in bars Related Sample: Chart. Show text |
| stacked | (optional) defines the stack a series belongs to. For details, including the use of the property in a dual axis chart, check the stacked section below Related Sample: Chart. Stacked chart |
stacked
stacked?: boolean | string
The property defines the stack a series belongs to, including the separate stacks of a chart with two value scales. The accepted values of the property are:
false/undefined- the chart renders the series as a separate layertrue- the value scale defines the stack, so all the series withstacked: truebound to the same scale form one stack. For a chart with a single value scale, this is a plain stacked chartstring- the explicit name of the group, which allows building two or more independent stacks, including on one scale
The chart places the stacks of one direction side by side, as usual bar series, and calculates the total property separately for each group.
series: [
{ type: "bar", value: "a", stacked: true }, // the stack of the left scale
{ type: "bar", value: "b", stacked: true },
{ type: "bar", value: "x", stacked: true, scale: "right" }, // the independent stack of the right scale
{ type: "bar", value: "y", stacked: true, scale: "right" },
{ type: "bar", value: "plan", stacked: "plan" }, // two stacks on one scale,
{ type: "bar", value: "fact", stacked: "fact" } // drawn side by side
]
Related sample: Chart. Grouped stacks (plan vs fact)
Related article: Stack groups
The list of config options for series (for charts without scales: Pie, Pie3D, Donut)
info
You can apply the options below to configure series for charts with the following types: "pie", "pie3D", "donut".
Usage
series: [
{
id?: string,
text?: string,
value: string,
color?: string,
monochrome?: string,
paddings?: number,
showText?: boolean,
showTextTemplate?: (points: any) => string,
stroke?: string,
strokeWidth?: number,
subType?: "basic" | "percentOnly" | "valueOnly",
useLines?: boolean,
valueTemplate?: (value: number) => string
}
]
Description
| id | (optional) the id of a series |
| text | (optional) the name of the data set property to map labels of data values to |
| value | (required) the name of the data set property to map data values to |
| color | (optional) points to the property in a data set that defines the color of a pie/donut sector |
| monochrome | (optional) 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 | (optional) paddings between a chart and its initial position |
| showText | (optional) shows/hides values of data items on the chart (Pie, Pie3D) |
| showTextTemplate | (optional) a function that specifies the template for showing values of data items on the chart (Pie, Pie3D) |
| stroke | (optional) the color of lines between sectors of a chart |
| strokeWidth | (optional) the width of lines between sectors of a chart |
| subType | (optional) specifies the subtype of a chart: "basic" | "percentOnly" | "valueOnly" |
| useLines | (optional) shows/hides lines used to "connect" chart sectors with labels |
| valueTemplate | (optional) a function that specifies the template for rendering the values for data items on a chart Related Sample: Chart. Value template |
The list of config options for series (for charts without scales: Treemap)
info
You can apply the options below to configure series for charts with the "treeMap" type.
Usage
series: [
{
text: string,
value: string,
direction?: "asc" | "desc",
paddings?: number,
showTextTemplate?: (points: any) => string,
stroke?: string,
strokeWidth?: number,
tooltipTemplate?: (points: any[]) => string,
}
]
Description
| text | (required) the name of the data set property to map labels of data values to. The index of the option is 1 (item[1]). |
| value | (required) the name of the data set property to map data values to. The index of the option is 0 (item[0]). |
| direction | (optional) defines the arrangement of tiles inside a chart ("desc" (by default) - from larger to smaller value, "asc" - from smaller to larger value) |
| paddings | (optional) paddings between a chart and its initial position |
| showTextTemplate | (optional) a function that specifies the template for showing values of data items on the chart |
| stroke | (optional) the color of lines between tiles |
| strokeWidth | (optional) 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 |
| tooltipTemplate | (optional) a function that defines a template for showing values of data items in tooltip Related Sample: Chart. Treemap chart initialization |
The list of config options for series (for charts without scales: Calendar heatmap)
PRO VERSION ONLY
The calendar heatmap chart is available only in the PRO version of the DHTMLX Chart (or DHTMLX Suite).
info
You can apply the options below to configure series for charts with the "calendarHeatMap" type.
Usage
series: [
{
date: string,
value: string,
color?: string, // by default, matches the value of the --dhx-background-secondary variable from the current color theme
negativeColor?: string, // by default, matches the value of the --dhx-color-primary variable from the current color theme
positiveColor?: string, // by default, matches the value of the --dhx-color-success variable from the current color theme
dateFormat?: string, // "%d/%m/%y" by default
days?: string[], // ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] by default
endDate?: string | Date, // the 31st of December of the maximal year specified in the dataset
maxValue?: number,
minValue?: number,
months?: string[], // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] by default
startDate?: string | Date, // by default, the 1st of January of the minimal year specified in the dataset
tooltip?: boolean, // true by default
tooltipTemplate?: ([string, number]) => string,
weekStart?: string, // "sunday" by default
}
]
Description
| date | (required) points to the name of the data set property which sets the dates for the chart. The index of the option is 0 (point[0]) |
| value | (required) points to the name of the data set property which sets the number content for the chart. The index of the option is 1 (point[1]) |
| color | (optional) sets the color of null values in the chart and legend. By default, the color matches the value of the --dhx-background-secondary variable from the current color theme |
| negativeColor | (optional) sets the color of negative values in the chart and legend. By default, the color matches the value of the --dhx-color-primary variable from the current color theme |
| positiveColor | (optional) sets the color of positive values in the chart and legend. By default, the color matches the value of the --dhx-color-success variable from the current color theme |
| dateFormat | (optional) defines the format of dates in the tooltips ("%d/%m/%y" by default). In this format, you can specify dates in the data set |
| days | (optional) an array with the list of the days of the week starting from sunday |
| endDate | (optional) the end date of the calendar heatmap; by default, the 31st of December of the maximal year specified in the dataset. Read the details. If you use a string value to specify the end date, it should match the format specified via the dateFormat option. |
| maxValue | (optional) the maximal value to be shown in the chart and legend. If there are values bigger than the maximal one, they will be painted with the color of the maximal value |
| minValue | (optional) the minimal value to be shown in the chart and legend. If there are values less than the minimal one, they will be painted with the color of the minimal value |
| months | (optional) an array with the list of the months of the year starting from January |
| startDate | (optional) the date starting from which the calendar heatmap will be displayed; by default, the 1st of January of the minimal year specified in the dataset. Read the details. If you use a string value to specify the start date, it should match the format specified via the dateFormat option. |
| tooltip | (optional) defines whether tooltips should be shown when you hover over the chart cell; true by default |
| tooltipTemplate | (optional) a function that defines a template for the tooltip |
| weekStart | (optional) sets the starting day of the week: "monday" | "saturday" | "sunday" (by default) |
Related article: Configuration