070_020_Bar

Previous Chapter          Previous Page          Next Page          Next Chapter          Table of content

Bar, StackedBar, HorizontalBar, HorizontalStackedBar

var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [65,59,90,81,56,55,40] ],
        title : "Year 2014"
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [28,48,40,19,96,27,100] ],
        title : "Year 2013"
    }
]
}

The bar/StackeBar/HorizontalBar/HorizontalStackeBar chart has a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data. Again, colours are in CSS format.

We have an array of labels too for display.

For each bar group, you can give a “title”.

If you want to set a different color for each bar, you just have to specify an array of color instead of a single color in the fillColor/strokeColor.

Example 1 :

var data = {
labels : ["January","February","March","April"],
datasets : [
    {
        fillColor : ["green","red","yellow","blue"],
        strokeColor : ["green","red","yellow","blue"],
        data : [65,59,90,81],
        title : "Year 2014"
    }
]
}

Example2 :

var data = {
labels : ["January","February","March","April"],
datasets : [
    {
        fillColor : ["rgba(255,0,0,0.8)","rgba(0,255,0,0.8)","rgba(0,0,255,0.8)","rgba(255,0,255,0.8)"],
        strokeColor : ["rgba(255,0,0,1)","rgba(0,255,0,1)","rgba(0,0,255,1)","rgba(255,0,255,1)"],
        data : [65,59,90,81],
        title : "Year 2014"
    } ,
    {
        fillColor : ["rgba(255,0,0,0.2)","rgba(0,255,0,0.2)","rgba(0,0,255,0.2)","rgba(255,0,255,0.2)"],
        strokeColor : ["rgba(255,0,0,1)","rgba(0,255,0,1)","rgba(0,0,255,1)","rgba(255,0,255,1)"],
        data : [28,48,40,19,96,27,100],
        title : "Year 2013"
    }
]
}

Instead of assigning a real color (or a array of real colors) to the fillColor and/or strokeColor variable, you can assign a function that returns a color. See chapter “Color Function” later on.

Previous Chapter          Previous Page          Next Page          Next Chapter          Top of Page