Customizing Your CanvasJS Charts

CanvasJS is a versatile and powerful charting library that has a simple API, and offers a wide range of customization options. For advanced users looking to create highly tailored and interactive charts, here are some tips and techniques to help you get the most out of CanvasJS.

ToolTip

Tooltips provide additional information when users hover over data points. In CanvasJS, the toolTip object lets the user set the behaviour of toolTip, and customize it according to their requirement.

Custom Content: Use the content property to format the tooltip content. HTML tags and data point values can be included to provide relevant information in a concise manner.

toolTip: { 
    shared: true,
    content: "Category <i>{label}</i> <br />Value: {y} units <br />"     
}

Styling Tooltips: Target the .canvasjs-chart-tooltip class in your CSS file, which allows application of custom CSS styling to your tooltip.

<style>
    .canvasjs-chart-tooltip  {
         box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px !important;
    }
    .canvasjs-chart-tooltip div {
         padding: 8px !important;
    }
</style>

Real-time Data Visualization

Certain applications may require real-time data visualization, and in such cases, CanvasJS allows you to update data dynamically.

Updating Data Points: You can use the dataPoints array within the data object, to update existing data points or add new ones.

chart.data[0].addTo("dataPoints", {
    x: chart.data[0].dataPoints[chart.data[0].dataPoints.length-1].x + 10, y: Math.random() * (100 - 10) + 10})
});

Live Data Feed: You can also implement some function to fetch new data at regular intervals and update the chart accordingly.

var updateChart = function () {     
    yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
    dps.push({x: xVal,y: yVal});
    xVal++;

    if (dps.length >  10 ) {
        dps.shift();                
    }

    chart.render();     
};

setInterval(function(){updateChart()}, updateInterval);

Axis Customization

CanvasJS provides several attributes within the axis object that allow customizations, and can help make your chart more readable, informative, and attractive.

Custom Labels: Use the labelFormatter function to customize the axis labels.

axisX: {
    labelFormatter: function (e) {
        return CanvasJS.formatDate( e.value, "DD MMM");
    }
}

Grid Lines and Ticks: Customize the appearance of grid lines and ticks to improve chart readability.

axisX:{
    gridThickness: 1,
    gridColor: "#ddd",
    tickColor: "#000"
},
axisY:{
    gridColor: "#ddd",
    tickColor: "#000"
}

User Interactivity

CanvasJS offers event handlers for various events across different elements, which can be used to enhance the user experience.

Click Events: Add click event handlers to data points or the chart itself, to make it a more interactive experience.

data: [
    {
        click: (e) => {
            if(!e.dataPoint.indexLabel)
                e.dataPoint.indexLabel = (e.dataPoint.y).toString();
            else e.dataPoint.indexLabel = "";
                e.chart.render();
        },
        dataPoints: [
            { x: 10, y: 34},
            { x: 20, y: 45},
            { x: 30, y: 19 },
            { x: 40, y: 75 },
            { x: 50, y: 15 },
            { x: 60, y: 60 },
            { x: 70, y: 48 },
            { x: 80, y: 04 },
            { x: 90, y: 35 }
        ]
    }
]

Mouseover and Mouseout: Set mouseover and mouseout handlers for data points to customize hover effects.

data: [
    {
        mouseover: (e) => {
            let markerSize = e.chart.data[e.dataSeriesIndex].dataPoints[e.dataPointIndex].markerSize || e.chart.data[e.dataSeriesIndex].markerSize;
            e.dataPoint.markerSize = markerSize*1.5;
            e.chart.render();
        },
        mouseout: (e) => {
            let markerSize = e.chart.data[e.dataSeriesIndex].dataPoints[e.dataPointIndex].markerSize || e.chart.data[e.dataSeriesIndex].markerSize;
            e.dataPoint.markerSize = markerSize / 1.5;
            e.chart.render();
        },
        type: "scatter",
        dataPoints: [
            { x: 10, y: 34},
            { x: 20, y: 45},
            { x: 30, y: 19 },
            { x: 40, y: 75 },
            { x: 50, y: 15 },
            { x: 60, y: 60 },
            { x: 70, y: 48 },
            { x: 80, y: 04 },
            { x: 90, y: 35}
        ]
    }
]

Mixed Chart Types

CanvasJS allows you to combine different chart types in a single chart to provide a more comprehensive view of your data. For example, line and column charts can be combined to show trends and comparisons across different categories.

data: [
   {
        type: "column",
        name: "Actual Sales",
        dataPoints: [
            { x: new Date(2016, 0), y: 20000 },
            { x: new Date(2016, 1), y: 30000 },
            { x: new Date(2016, 2), y: 25000 },
            { x: new Date(2016, 3), y: 70000 },
            { x: new Date(2016, 4), y: 50000 },
            { x: new Date(2016, 5), y: 35000 },
            { x: new Date(2016, 6), y: 30000 },
            { x: new Date(2016, 7), y: 43000 },
            { x: new Date(2016, 8), y: 35000 },
            { x: new Date(2016, 9), y: 30000 },
            { x: new Date(2016, 10), y: 40000 },
            { x: new Date(2016, 11), y: 50000 }
        ]
    }, 
    {
        type: "line",
        name: "Expected Sales",
        dataPoints: [
            { x: new Date(2016, 0), y: 40000 },
            { x: new Date(2016, 1), y: 42000 },
            { x: new Date(2016, 2), y: 45000 },
            { x: new Date(2016, 3), y: 45000 },
            { x: new Date(2016, 4), y: 47000 },
            { x: new Date(2016, 5), y: 43000 },
            { x: new Date(2016, 6), y: 42000 },
            { x: new Date(2016, 7), y: 43000 },
            { x: new Date(2016, 8), y: 41000 },
            { x: new Date(2016, 9), y: 45000 },
            { x: new Date(2016, 10), y: 42000 },
            { x: new Date(2016, 11), y: 50000 }
       ]
    }   
]

Conclusion

Customizing CanvasJS charts can significantly enhance the visual appeal and functionality of your data visualizations. By leveraging features the likes of the ones discussed in this article, you can create highly engaging and informative charts. These tips will help you unlock the full potential of CanvasJS and create charts that stand out.

Blog