From 8dc8c0f92c2ba06b45324847a7dd33c44fdbbabc Mon Sep 17 00:00:00 2001 From: xtrinch Date: Tue, 26 Apr 2016 20:55:08 +0200 Subject: [PATCH 1/2] Added custom labels --- src/Chart.StackedBar.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/Chart.StackedBar.js b/src/Chart.StackedBar.js index a452f04..b4e4430 100644 --- a/src/Chart.StackedBar.js +++ b/src/Chart.StackedBar.js @@ -164,14 +164,26 @@ this.datasets.push(datasetObject); helpers.each(dataset.data,function(dataPoint,index){ - if(!helpers.isNumber(dataPoint)){ + + var additionalLabel = ''; + var label = data.labels[index]; + if(!helpers.isNumber(dataPoint) && !helpers.isNumber(dataPoint.y)){ dataPoint = 0; } + if (helpers.isNumber(dataPoint.y)) { + additionalLabel = dataPoint.data; + dataPoint = dataPoint.y; + } + + if (typeof(label) !== 'string') { + label = label.additional; + } //Add a new point for each piece of data, passing any required data to draw. //Add 0 as value if !isNumber (e.g. empty values are useful when 0 values should be hidden in tooltip) datasetObject.bars.push(new this.BarClass({ value : dataPoint, - label : data.labels[index], + label : label, + additionalLabel: additionalLabel, datasetLabel: dataset.label, strokeColor : dataset.strokeColor, fillColor : dataset.fillColor, @@ -436,6 +448,12 @@ return values; }; + for (var i = 0; i < labels.length; i++) { + if (typeof(labels[i]) !== 'string') { + labels[i] =labels[i].name; + } + } + var scaleOptions = { templateString : this.options.scaleLabel, height : this.chart.height, From 05f1d97a4bfc9b02ba10fd832d547c5a6cf6213a Mon Sep 17 00:00:00 2001 From: xtrinch Date: Tue, 26 Apr 2016 21:00:32 +0200 Subject: [PATCH 2/2] Added example --- samples/stacked-bar.html | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/samples/stacked-bar.html b/samples/stacked-bar.html index ddeabc4..bf2f36a 100644 --- a/samples/stacked-bar.html +++ b/samples/stacked-bar.html @@ -18,7 +18,18 @@ var randomColorFactor = function(){ return Math.round(Math.random()*255)}; var barChartData = { - labels : ["January","February","March","April","May","June","July"], + labels : [ + { + name: "January", + additional: "Date 1" + }, + "February", + "March", + "April", + "May", + "June", + "July" + ], datasets : [ { fillColor : "rgba(220,220,220,0.5)", @@ -39,14 +50,23 @@ strokeColor : "rgba(240,73,73,0.8)", highlightFill : "rgba(240,73,73,0.75)", highlightStroke : "rgba(240,73,73,1)", - data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] + data : [ + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'}, + {y:randomScalingFactor(), data: 'Tooltip text'} + ] } ] }; window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx).StackedBar(barChartData, { - responsive : true + responsive : true, + multiTooltipTemplate: "<% if(additionalLabel.length>0){ %><%= additionalLabel %><% }else{ %><%= label %><% } %> - <%= value %>" }); $('#randomizeData').click(function(){