Skip to main content

Work with Chart

Setting Chart configuration​

You can change configuration of Chart on the fly with the help of the setConfig() method. It takes as a parameter an object with updated chart configuration.

const config = {
    type: "radar",
    scales: {
        radial:{
            value: "month",
            maxTicks: 7
        }
    },
    series: [
        {
            id: "A",
            value: "company A",
            fill: "#000000",
            alpha: 0.3,
            color: "#000000"
        },
        {
            id: "B",
            value: "company B",
            fill: "#FFFF33",
            alpha: 0.3,
            color: "#FFFF33"
        }
    ]
}

chart.setConfig(config);

Related sample: Chart. Change configuration on the fly

Getting series configuration​

The Chart API gives you the possibility to get an object with the configuration of a certain series. Use the getSeries() method for this purpose. It takes the id of a series as a parameter:

const config = chart.getSeries("A");
/* => 
{
    "strokeWidth": 2, "active": true,
    "tooltip": true, "paddings": 5,
    "color": "none", "fill": "none",
    "pointType": "circle", "id": "A",
    "value": "company A", "pointColor": "blue",
    "type": "radar",
    "scales": [
        "radial"
    ]
}
*/

Related sample: Chart. Get series

Iterating over series​

It is possible to iterate over chart series using the eachSeries(). As a parameter it takes a handler function that will perform iteration. Pass an array with series objects as a parameter of the handler function:

const chart = new dhx.Chart("chart_container", {
    type: "radar",
    scales: {
        radial:{
            value: "month",
            maxTicks: 7
        }
    },
    series: [
        {
            id: "A",
            value: "company A",
            fill: "#000000",
            alpha: 0.3,
            color: "#000000"
        },
        {
            id: "B",
            value: "company B",
            fill: "#FFFF33",
            alpha: 0.3,
            color: "#FFFF33"
        }
    ]
});
 
chart.eachSeries(function(seria){
    seria.config.fill
});
// -> ["#394E79", "#5E83BA", "#C2D2E9"]

Related sample: Chart. Each series

Adding items into Chart​

The API of Data Collection allows you to perform operations with Chart data items. For example, you can add more items (points) into your Chart using the method, like this:

const config = {
    type:"line",
    scales: {
        "bottom" : {
            text: "text",
            showText: false
        },
        "left" : {
            maxTicks: 10,
            max: 100,
            min: 0
        }
    },
    series: [
        {
            value: "value",
            color: "#5E83BA",
            strokeWidth: 2
        }
    ]
};

const chart = new dhx.Chart("chart_container", config);
chart.data.parse([
    {
        value: Math.random() * 100,
        text: "u" + Date.now() + 1
    },
    {
        value: Math.random() * 100,
        text: "u" + Date.now() + 2
    },
    {
        value: Math.random() * 100,
        text: "u" + Date.now() + 3
    }
]);
function add() {
    chart.data.add({
        value: Math.random() * 100,
        text: "u" + Date.now()
    });
};

The method takes as a parameter an object with two properties:

valuethe value of an item
textthe text of an item on the X-axis

A new data item is added relative to the X-axis. In case of adding many items, you need to increase the value of each new data item position to add it correctly.

Related sample: Chart. Adding data on the fly