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
- 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", "treeMap", and "calendarHeatMap"
const chart = new dhx.Chart("chart_container", {
type:"bar"
});
scales
- scales - (object) defines configuration of chart scales
const chart = new dhx.Chart("chart_container", {
scales:{}
});
It is necessary to configure scales for the Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, or Scatter chart.
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 - (array) defines configuration of chart series
const chart = new dhx.Chart("chart_container", {
series:[]
});
The series configuration option is required for all types of charts.
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
- legend - (object) defines the configuration of a chart legend
const chart = new dhx.Chart("chart_container", {
legend:{}
});
The legend configuration option is required for Treemap charts and is optional for other types of charts.
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.
maxPoints
- 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
Line and Spline chart
The configuration object of Line and Spline chart must include the following properties:
- type: "line" (or type: "spline")
- scales:
- series: []
- and, optionally, legend:
For example:
const config = {
type: "line", // or "spline"
scales: {
"bottom": {
text: "month"
},
"left": {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company A",
color: "#81C4E8",
strokeWidth: 3
},
{
id: "B",
value: "company B",
color: "#74A2E7",
strokeWidth: 3
},
{
id: "C",
value: "company C",
color: "#5E83BA",
strokeWidth: 3
}
],
legend: {
series: ["A", "B", "C"],
halign: "right",
valign: "top"
}
};
const chart = new dhx.Chart("chart_container", config);
chart.data.parse(dataset);
Related sample: Chart. Line chart initialization
Bar and X-Bar chart
The configuration object of Bar and X-Bar chart must include the following properties:
- type: "bar" (or type: "x-bar")
- scales:
- series: []
- and, optionally, legend:
For example:
const config = {
type: "bar", // or type: "x-bar"
scales: {
"bottom": {
text: "month"
},
"left": {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company A",
color: "#81C4E8",
fill: "#81C4E8"
},
{
id: "B",
value: "company B",
color: "#74A2E7",
fill: "#74A2E7"
},
{
id: "C",
value: "company C",
color: "#5E83BA",
fill: "#5E83BA"
}
],
legend: {
series: ["A", "B", "C"],
halign: "right",
valign: "top"
}
};
const chart = new dhx.Chart("chart_container", config);
chart.data.parse(dataset);
Related sample: Chart. Bar chart initialization
Area and SplineArea chart
The configuration object of Area and SplineArea chart must include the following properties:
- type: "area" (or type: "splineArea")
- scales:
- series: []
- and, optionally, legend:
For example:
const config = {
type: "area", // or "splineArea"
scales: {
"bottom": {
text: "month"
},
"left": {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company A",
color: "#81C4E8",
strokeWidth: 3
},
{
id: "B",
value: "company B",
color: "#74A2E7",
strokeWidth: 3
},
{
id: "C",
value: "company C",
color: "#5E83BA",
strokeWidth: 3
}
],
legend: {
series: ["A", "B", "C"],
halign: "right",
valign: "top"
}
};
const chart = new dhx.Chart("chart_container", config);
chart.data.parse(dataset);
Related sample: Chart. Area chart initialization
Pie, Pie 3D and Donut chart
The configuration object of Pie, Pie 3D and Donut chart must include the following properties:
- type: "pie" (or type: "pie3D", type: "donut")
- series: []
- and, optionally, legend:
For example:
const config = {
type: "pie", // or type: "pie3D", or type: "donut"
series: [
{
value: "value",
color: "color",
text: "month",
stroke: "#FFFFFF",
strokeWidth: 2
}
],
legend: {
values: {
text: "id",
color: "color"
},
halign: "right",
valign: "top"
}
};
const chart = new dhx.Chart("chart_container", config);
chart.data.parse(pie_dataset);
Related sample: Chart. Pie chart initialization