Customization

Styling chart

Apply custom CSS classes to change chart appearance.

Related sample: Chart. Styling (custom CSS)

Follow these steps:

• Add one or more CSS classes in the <style> section of your HTML page or in a separate stylesheet linked on the page:

<style>
    .my_first_class {
        /*some styles*/
    }
 
    .my_second_class {
        /*some styles*/
    }
</style>

• Assign the class name (or several names separated by spaces) to the css property:

const chart = new dhx.Chart("chart_container", {
    css: "my_first_class my_second_class"
});

For example:

<style>
    .custom {
        --dhx-background-primary: #444;
        --dhx-font-color-secondary: #fff;
    }
    .custom .chart.bar {
        fill: orange;
    }
</style>

<script>
    const chart = new dhx.Chart("chart_container", {
        type: "bar",
        css: "custom dhx_widget--bordered",
        scales: {
            "top": {
                size: 100
            },
            "bottom": {
                text: "month", size: 100
            },
            "left": {
                size: 100, maxTicks: 10, max: 100, min: 0
            },
            "right": {
                size: 100
            }
        },
        series: [
            {
                id: "A", value: "company C", color: "#5E83BA",
                pointType: "circle", fill: "#5E83BA", size: 35
            }
        ]
    });
</script>

Adding template to scale labels

Related sample: Chart. Text template for scale labels

Set the textTemplate option of scales to add a template for scale labels:

const chart = new dhx.Chart("chart_container", {
    type: "line",
    css: "dhx_widget--bg_white dhx_widget--bordered",
    scales: {
        "bottom": {
            text: "month",
            textTemplate: function(month) {
                return "m:" + month;
            }
        },
        "left": {
            maxTicks: 10, max: 100, min: 0
        }
    },
    series: [
        {
            id: "A", value: "company C", color: "#5E83BA", strokeWidth: 2
        }
    ]
});

Adding color gradient for bars

Related sample: Chart. Bar chart. Gradient

Use the gradient option of series to define a color gradient for bars. Set it to a function that takes the series fill color as a Hex string:

const chart = new dhx.Chart("chart_container", {
    type: "bar",
    css: "dhx_widget--bg_white dhx_widget--bordered",
    scales: {
        "bottom": {
            text: "month",
        },
        "left": {
            max: 90
        }
    },
    series: [
        {
            id: "A", value: "company A", color: "none", size: 35,
            fill: "#5E83BA",
            gradient: function(color) {
                return {
                    stops: [
                        {
                            offset: 0.5, 
                            color: color, 
                            opacity: 1 
                        }, 
                        { 
                            offset: 1, 
                            color: "#394E79", 
                            opacity: 1 
                        } 
                    ] 
                } 
            } 
        }
    ]
});

Setting bar colors dynamically

By default, all bars of a series have the same color. To color each bar by its data, set the fill option of series as a function. The chart calls the function with a data item, and the function returns the fill color of the bar that displays it:

const plan = 500;
const minimum = 250;

const chart = new dhx.Chart("chart_container", {
    type: "bar",
    scales: {
        "bottom": {
            text: "month"
        },
        "left": {
            max: 700
        }
    },
    series: [
        {
            id: "sales",
            label: "Monthly sales",
            value: "company A",
            fill: function(item) {
                if (item["company A"] >= plan) {
                    return "#5FDAA0";
                }
                return item["company A"] >= minimum ? "#FFD54F" : "#F44336";
            },
            color: "#394E79",
            showText: true
        }
    ],
    legend: {
        series: ["sales"],
        halign: "right",
        valign: "top"
    }
});

Related sample: Chart. Dynamic colors. Conditional fill by value

You can also set the color option as a function. The chart calls it with a data item, and the function returns a color. If you set only color (and don't set fill), its value colors the bars as well. If you set both options, the bars take the color that fill returns.

Related sample: Chart. Dynamic colors. Highlight highest and lowest

Details on how the chart applies the colors:

• The chart calls the fill or color function for each bar. When the data changes, the chart calls the function again and repaints the bars.
• The legend marker takes the color that the function returns for the first data item, so it doesn't reflect the other bar colors.
• In a stacked chart, each series applies its own fill and color, so one series can use a function while another uses a fixed color.
• The chart calls the gradient function once for each distinct color that fill returns, so bars that share a color also share a gradient (see the Chart. Dynamic colors. Gradient fill sample).

note

Only Bar and X-Bar charts accept a function in fill and color. Line, Spline, Area, SplineArea, Radar and Scatter charts draw a series as a single shape and throw a TypeError if you set fill or color as a function.

Adding template to tooltips

Related sample: Chart. Tooltip template

Set the tooltipTemplate option of series to define how data item values appear in a tooltip:

function tooltipTemplate(p) {
  return "x: " + p[1] + ", y: " + p[0];
};

const chart = new dhx.Chart("chart_container", {
    css: "dhx_widget--bg_white dhx_widget--bordered",
    scales: {
        bottom: {
            locator: "value B", title: "value B", max: 70
        },
        left: {
            title: "value A", max: 70
        }
    },
    series: [{
        id: "A", type: "scatter", value: "value A", valueY: "value B",
        pointType: "circle", color: "#EEB98E",
        tooltipTemplate: tooltipTemplate
    },
    {
        id: "B", type: "scatter", value: "value B", valueY: "value A",
        pointType: "rect", color: "#5E83BA",
        tooltipTemplate: tooltipTemplate
    }],
    legend: {
        series: ["A", "B"],
        usePointType: true,
    }
});

Adding template to text values of data items in bars

Related sample: Chart. Show text

The showTextTemplate option of series formats the values that appear on bars:

const chart = new dhx.Chart("chart_container", {
    type: "bar",
    css: "dhx_widget--bg_white dhx_widget--bordered",
    scales: {
        bottom: {
            text: "month"
        },
        left: {
            max: 1000, maxTicks: 10, min: 0,
            textTemplate: function (cost) {
                return cost !== 0 ? "$" + cost + ".00" : cost + ".00"
            }
        }
    },
    series: [
        {
            id: "A", value: "company A", color: "#81C4E8", fill: "#81C4E8",
            showText: true,
            showTextRotate: -90,
            showTextTemplate: function (sum) {
                return "$ " + sum + ".00";
            },
            barWidth: 22, tooltip: false
        },
        {
            id: "B", value: "company B", color: "#74A2E7", fill: "#74A2E7",
            showText: true,
            showTextRotate: "-90",
            showTextTemplate: function (sum) {
                return "$ " + sum + ".00";
            },
            barWidth: 22, tooltip: false
        }
    ],
    legend: {
        series: ["A", "B"],
        halign: "right",
        valign: "middle"
    }
});

Adding template to values of data items in Pie and Donut charts

Related sample: Chart. Value template

The valueTemplate option of series formats the values displayed on Pie, Pie3D, and Donut charts. For example:

const chart = new dhx.Chart("chart_container", {
    type: "pie",
    series: [
        {
            value: "value",
            valueTemplate: value => {
                return (value * 100).toFixed(2) + "%";
            }
        }
    ]
});