Configuration

This chapter will guide you through the set of Chart configuration options. It explores both common dhtmlxChart properties actual for all chart types and the config options individual for particular types.

You need to set necessary properties from those listed below within the configuration object passed to the chart constructor function and thus adjust the chart settings to meet your needs.

Main properties

dhtmlxChart includes several configuration options that are mostly common for all chart types. They are:

type - (string) defines the type of a chart to initialize; "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area", "splineArea", "donut", "pie", "pie3D" and "radar"

var chart = new dhx.Chart("chart", {
    type:"bar"
});

scales - (object) defines configuration of chart scales. Check details below.

var chart = new dhx.Chart("chart", {
    scales:{}
});

series - (array) defines configuration of chart series. Check details below.

var chart = new dhx.Chart("chart", {
    series:[]
});

legend - (object) defines the configuration of a chart legend. Check details below.

var chart = new dhx.Chart("chart", {
    legend:{}
});

maxPoints - (number) displays an average number of values in case a data set is too large to show all the values in the chart

var chart = new dhx.Chart("chart", {
    type:"line",
    maxPoints:100
});

Scales

There are "left","right","top","bottom" and "radial" (for Radar chart) types of scales. Scales have both common and specific options.

var chart = new dhx.Chart("chart_container",{
    type:"area",
    scales: {
        "bottom" : {
            text: 'month'
        },
        "left" : {
            padding: 10,
            max: 90
        }
    },
    series: [
        {
           value: 'company A',
           strokeWidth: 2
           // more options   
        }
    ]
});

type - (string) the type of a scale: "left","right","top","bottom","radial"
title - (string) sets a title for a scale
text - (string) sets a template for labels of data items rendered on a scale
locator - (string) points to the data property, the values of which should be rendered in the chart (used for Scatter chart)
textTemplate - (function) sets a template for scale labels
textPadding - (number) distance between labels of data items and the scale
showText - (boolean) shows/hides labels of data items on the scale
scalePadding - (number) distance between the scale and its title
hidden - (boolean) hides/shows the whole scale
grid - (boolean) shows/hides the grid lines (for x,y, or both scales). true by default for both scales (scales lines are shown). To hide both scales lines, you need to set grid:false in the configs of each scale
dashed - (boolean) sets the dashed type for a scale. Use the dashed:true option in the configuration of the scale
targetLine - (number) shows a threshold line (a target value); looks for the specified value in the data
targetValue - (number) allows setting a threshold line at any defined level (any number, not necessarily from the data)
max - (number) the maximal value of the Y scale
min - (number) the minimal value of the Y scale
log - (boolean) sets the Y scale as logarithmic
padding - (number) the padding between the values of the Y scale (area)
maxTicks - (number) sets the maximal number of ticks on the Y scale

The radial scale has its own properties, due to peculiarities of configuration:

radial scale
- value - (string) the name of the dataset property to take data values from (map to)
- zebra - (boolean) sets a striped scale coloring for the Radar chart (alternation of two colors in a step)
- showAxis - (boolean) renders values of the scale

Series

Series present an array of objects each of which contains a number of properties for rendering a separate data set on a chart.

var 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)

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 the 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"
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
fill - (string) the color of the series filling (Area, Bar, Radar) in Hex format
alpha - (number) transparency of the series filling (Area, Bar, Radar)
gradient - (function) a function that defines a color gradient for bars (Bar)
baseLine - (number) sets a base line for rendering data items (bars in Bar chart)
stacked - (boolean) defines whether a stacked chart will be rendered (Bar)
barWidth - (number) sets the width of bars in the Bar chart
showText - (boolean) shows/hides values of data items in bars of the Bar chart

The list of config options for series (for charts without scales: Pie, Pie3D, Donut)

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
useLines - (boolean) shows/hides lines used to "connect" chart sectors with labels
showText - (boolean) shows/hides values of data items on the chart (Pie, Pie3D)
subType - (string) specifies the subtype of Donut chart: "basic"|"percentOnly"|"valueOnly"
color - (string) points to the property in a data set that defines the color of a pie/donut sector
stroke - (string) the color of lines between sectors of a chart
monochrome - (string) colors chart sections in the shades of a color specified as a value of this property (e.g. "blue")
paddings - (number) paddings between a chart and its initial position

Legend

The legend object may contain a number of options that define its configuration.

var chart = new dhx.Chart("chart_container",{
    scales: {
        // scales config
    },
    series: [
        // list of series 
    ],
    legend: {
        series: ["A", "B", "C"],
        valign: "top",
        halign: "right"
    }    
});

The list of config options for legend

values - (object) maps attributes of legend items to data set properties. Contains the following properties:
- id - (string,number) the id of the series that will be bound to the legend
- text - (string) the pointer to the data value to take a text for the legend from
- color - (string) the pointer to the data value to take a color for the legend from
- alpha - (number) transparency of a legend item
form - (string) the form of the legend markers ("rect" or "circle")
itemPadding - (number) padding between legend items
halign - (string) the horizontal alignment of the legend block: "left"|"right"|"center"
valign - (string) the vertical alignment of the block: "top"|"bottom"|"middle"
series - (array) the list of series that should be shown in the legend
margin - (number) margin between the scale and the legend