[Chartjs]-Modify Chart js

by

1👍

You can use the ChartNew.Js libary available at https://github.com/FVANCOP/ChartNew.js/ . This libary adds the functionality to add an array of object for the color options. It does add some options for changing the labels as well, but I do not think it is possible to use an image for the actual chart’s labels. You may be able to modify the tooltip that pops up for that label doing something like: How to add image to chart.js tooltip?, but I cant say for sure. Here is some code that I used in a recent app to color code each bar based on the percent value of the data:

//Set all canvas options and fill with data
self.chartJs = function () {
    //create an array for each column to be set into the chart properties -- also create arrays for the colors of the columns
    var arrayOfJobData = self.chartData();
    var descArray = [];
    var effArray = [];
    var colorArray = [];

    for (i = 0; i < arrayOfJobData.length; i++) {
        //console.log(arrayOfJobData[i].Cost_Code_Description);
        descArray.push(arrayOfJobData[i].Cost_Code_Description);
        //console.log(arrayOfJobData[i].Efficency);
        effArray.push(arrayOfJobData[i].Efficency);

        //Create an array of colors to match with the corresponding efficency % to show a + - relationship in the color scheme
        if (arrayOfJobData[i].Efficency < 100) {
            colorArray.push("red");
        }
        else if (arrayOfJobData[i].Efficency >= 100) {
            colorArray.push("green");
        }
    }

    //chart data is set and colors selected
    var barChartData = {
        labels: descArray, //array labels holding the desc for each cost code
        datasets: [
            {
                type: "Bar",
                //label: "Efficency %",
                fillColor: colorArray,
                strokeColor: "black",
                pointColor: "rgba(220,220,220,1)",
                pointstrokeColor: "white",
                drawMathLine: "mean", //using the math functions add-in draw a line with the average %
                mathLineStrokeColor: "orange",
                data: effArray //array of efficency percent values
            }]
    }

You can basically build your own array of colors using a method somewhat like was mentioned by the other guy to set only the last color if you want too. The important thing is that you should use ChartNew.js to do what you want with ease.

Here is something more aligned with what you want in colors:

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
    labels : ["3/20","3/21","3/22","3/23"],
    datasets : [
        {
            fillColor: ["chartGood ","chartGood ","chartGood ","red"],
            strokeColor : "rgba(255,255,255,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [ 52, 50, 49, 59]
        }
    ]
}

There is also pretty good documentation for ChartNew.js at : https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options

0👍

for the point 1 :

To plot your last bar with different color, you can divide your dataset to different data arrays as follow : the first data array : you replace the last value by null … and for the second data array, all the values are null except the last one !! 

"datasets": [{
            fillColor : chartGood,
            strokeColor : "rgba(255,255,255,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [12, 21, 28, 29, 31, 55, 52, 50, 49, null]
        },
        {
            fillColor : chartGood,
            strokeColor : "rgba(255,0,0,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [null, null, null, null, null, null, null, null, null, 59]
        }],

For the second point :

If you want that the last label will be an image : this is not possible with Chart.js …. however you can use some (html, css) tricks to place your image over the last label …

  • As example you can plot a table below the labels, the number of columns = length of the labels set (in your case = 10)
  • You set as style = visibility: hidden for each column .. only the last one (visible)
  • You put a negative margin-top value (to place your image over the label)

Hope this help

Leave a comment