JavaScript
var cs1 = [{"label": "Travel", "y": 208.39}, {"label": "Treasury", "y": 723.4}, {"label": "Tax", "y": 945.0}, {"label": "Controlling", "y": 4320.0}, {"label": "Account to Report", "y": 3867.0}, {"label": "Accounts Receivables", "y": 1207.65}, {"label": "Accounts Payables", "y": 1000.87}, {"label": "Function Management", "y": 1625.677}]
var cs2 = [{"label": "Travel", "y": 128.79988786388662}, {"label": "Treasury", "y": 717.6724635593523}, {"label": "Tax", "y": 1038.20128082539}, {"label": "Controlling", "y": 3876.5312824018624}, {"label": "Account to Report", "y": 3075.7208574606566}, {"label": "Accounts Receivables", "y": 1309.74265315412}, {"label": "Accounts Payables", "y": 1059.6892462286996}, {"label": "Function Management", "y": 1584.097925714236}]
var cs3 = [{"label": "Travel", "y": 66.54142961499802}, {"label": "Treasury", "y": 418.2499341070603}, {"label": "Tax", "y": 620.4419738192264}, {"label": "Controlling", "y": 2230.128310294057}, {"label": "Account to Report", "y": 1764.1915743680897}, {"label": "Accounts Receivables", "y": 731.4421755915438}, {"label": "Accounts Payables", "y": 590.2158778970883}, {"label": "Function Management", "y": 915.2197733705627}]
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Total costs (TEUR)",
fontSize: 24
},
colorSet: "fd4",
/** Set axisY properties here*/
axisY:{
includeZero: true,
interval: 1000,
labelMaxWidth: 100,
},
axisX:{
labelTextAlign: "left",
labelMaxWidth: 120,
},
data: [ //array of dataSeries
{ //dataSeries - Company
type: "bar",
name: "S1",
showInLegend: true,
dataPoints: cs1
},
{ //dataSeries - Peers
type: "bar",
name: "S2",
showInLegend: true,
dataPoints: cs2
},
{ //dataSeries - Champions
type: "bar",
name: "S3",
showInLegend: true, ...