FVANCOP / ChartNew.js

MIT License
420 stars 142 forks source link

How to highlight bar in bar chart? #384

Closed Bambicruz closed 8 years ago

Bambicruz commented 8 years ago

How can you highlight / give a different color for one bar in bar chart? (including Horizontal bar)

markosko commented 8 years ago

Hello, function for coloring and how use function in datasets

function setColor(area,ctx,data,statData,posi,posj,othervars) 
{
/*
data.labels[posj] as condition if based on label
data.datasets[posi].data[posj]*1 as condition based on value or
for example posi==0 for all bars in first dataset
or posj==4  for fifth bar in all datasets 
or combination of all
*/
    if(/*put condition*/){
        if(area=="COLOR")return "rgba(0,102,0,0.8)";
        else if(area=="STROKECOLOR")return "rgba(0,102,0,0.8)";
    }
    else{
        return "#AAA";
    }
}

var mydata1={
    labels : ["A","B","C","D","E"],
    datasets : [
        {
            fillColor : setColor,
            strokeColor : setColor,
            data : [1,22,66,50,2],
        },
        {
            fillColor : setColor,
            strokeColor : setColor,
            data : [50,40,35,40,60],
        }
    ]
}

I hope its understandable.

FVANCOP commented 8 years ago

Try this : the second bar of the second group of data will be blue.

    var mydata = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointstrokeColor : "yellow",
        data : [95,53,99,,73,27,82],
            title : "2014"
    },
    {
        fillColor : ["rgba(151,187,205,0.5)","blue","rgba(151,187,205,0.5)"],
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "green",
        pointstrokeColor : "yellow",
        data : [35,43,59,,31,50,66],
            title : "2013"
    }
]
   }               

See https://github.com/FVANCOP/ChartNew.js/wiki/085_option_array_func