Customization

Styling chart

There is a possibility to make changes in the look and feel of a chart.

Related sample:  Chart. Custom Styling

For this you need to take the following steps:

  • add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)
<style>
    .my_first_class {
        /*some styles*/
    }
 
    .my_second_class {
        /*some styles*/
    }
</style>
  • specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the Chart configuration:
var chart = new dhx.Chart({
    css:"my_first_class my_second_class"
});

For example:

<style>
    .custom-class .dhx_chart-graph_area {
        fill:#444;
    }
    .custom-class .grid-line {
        stroke: white;
        stroke-width: 0.5;
    }
    .custom-class .chart.bar {
        fill: orange;
    }
</style>
 
const chart = new dhx.Chart("chart", {
    type: "bar",
    css: "custom-class dhx_widget--bg_white 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
        }
    ]
});

Adding template to scale labels

Related sample:  Chart. Text Template For Scale Labels

While configuring chart scales you can add a template for the labels of the scales by using the textTemplate configuration option of scales:

const chart = new dhx.Chart("chart", {
    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 Gradient

It is possible to define a color gradient for bars with the help of the gradient option of series. You need to set its value as a function that takes the color of the series filling in Hex format as a parameter:

const chart = new dhx.Chart("chart", {
    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                         }                     ]                 }             }         }
    ]
});

Adding template to tooltips

Related sample:  Chart. Tooltip Template

You can easily define a template for showing values of data items in tooltip via the tooltipTemplate option of series:

function tooltipTemplate(p) {   return "x: " + p[1] + ", y: " + p[0]; };  
const chart = new dhx.Chart("chart", {
    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 lets you an opportunity to add a template to values that are shown for data items in bars:

const chart = new dhx.Chart("chart", {
    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"
    }
});
Back to top