Skip to main content

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", "x-bar", "area", "splineArea", "radar", "scatter".

Usage​

series: [
    {
        id: string,
        value: string,
        type?: "line" | "spline" | "bar" | "x-bar" | "area" | "splineArea" | "radar"| "scatter",
        label?: ((seria: ISeriaConfig) => string) | string,

        active?: boolean,
        color?: string,
        css?: string,
        dashed?: boolean,
        pointColor?: string,
        pointType?: "rect" | "circle" | "triangle" | "rhombus" | "simpleRect" | "simpleCircle" | "empty",
        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
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
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 specific for Area, Bar and Radar charts​

Usage​

series: [
    {
        ..., // config options for series (for charts with scales)
        fill?: string,
        alpha?: number,
    }
]

Description​

fill(optional) the color of the series filling in Hex format
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,
    }
]

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 whether a stacked chart will be rendered

Related Sample: Chart. Stacked chart


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