Skip to main content

Configuration

This chapter will guide you through the set of Chart configuration options. It explores both common DHTMLX Chart 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

DHTMLX Chart 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", "radar", and "treeMap"
const chart = new dhx.Chart("chart_container", {
type:"bar"
});
const chart = new dhx.Chart("chart_container", {
scales:{}
});
const chart = new dhx.Chart("chart_container", {
series:[]
});
const chart = new dhx.Chart("chart_container", {
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
const chart = new dhx.Chart("chart_container", {
type:"line",
maxPoints:100
});

Related sample: Chart. Max points

Scales

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

const 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.

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

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.

const 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.