Skip to main content

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"});
var chart = new dhx.Chart("chart", {    scales:{}});
var chart = new dhx.Chart("chart", {    series:[]});
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});

Related sample: Chart. Max Points

Scales#

There are "left","right","top","bottom" and "radial" (for Radar chart) types of scales.

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           }    ]});

Related sample: Chart. Scale Title

Scales have both common and specific options. Check the full list of the available options for scales in the API reference.

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"        }    ]});

Related sample: Chart. Point Types

See the full list of configuration options for chart series in the API reference.

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"    }    });

Related Samples:

You can view the full list of the configuration options of chart legends in the API reference.