Skip to main content

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