[SOLVED] Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?

Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?

I'm hoping I can add markup to each dataset individually so that I can change the colors with css.

var ctx = document.getElementById("myChart").getContext("2d");
var data = {
        labels: ["(1)","(2)","(3)","(4)","(5)"],
        datasets: [
            {
                label: "Food Chart",
                fillColor: "#000066",
                strokeColor: "transparent",
                pointColor: "red",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: calcChart(),
            }
        ]
    }
    var options = {
        scaleShowHorizontalLines: true,
        barValueSpacing : 5,
        scaleBeginAtZero : true,
        barValueSpacing : 25
    }
    var myBarChart = new Chart(ctx).Bar(data,options);

Solution

Since Chart.js and Canvasjs both use the canvas element to draw the charts you can't interact with the elements using CSS.

If you want to use custom CSS to the chart elements you will need to use a SVG library like highcharts.