I have a double doughnut chart. When a mouse hovers a particular dataset, it must maintain its color, while everything else should become darker as shown in this picture picture. In other words, I need the opposite of a hover effect. Here is my code https://jsfiddle.net/arrruzhan11/mufw4r07/ (p.s. hover effect in the snippet below is not working).
var ctx = document.getElementById("myChart");
var doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets: [
{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8','#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db','#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,}
]},
options: {
tooltips: {
callbacks: {
beforeBody: function (chart, data) {
const hoverval = document.getElementById('hoverval');
var datasetIndex = chart[0].datasetIndex;
var label = data.datasets[datasetIndex].label;
hoverval.innerText = `${label}`;
}
},
},
responsive: true,
legend: {
position: "left",
align: "start",
fullSize: true,
},
hover: {
mode: 'dataset',
},
}})
#hoverval {
padding: 10px;
border: solid 1px grey;
background: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<h3>
How to darken other datasets when hovering one dataset in chart js?
</h3>
<div id="hoverval"> </div>
<canvas id="myChart" width="470" height="200"></canvas>
You can define an onHover function as follows:
onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
}
For further information, please consult the Chart.js documentation here.
Please take a look at your amended code and see how it works. Note that this sample uses Chart.js v3.8.2, the current most recent version of the library.
const bgColor = ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'];
const hoverBgColor = ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'];
new Chart('myChart', {
type: 'doughnut',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: bgColor
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: bgColor
}
]
},
options: {
responsive: false,
onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
},
plugins: {
legend: {
position: "left",
align: "start",
fullSize: true,
}
},
hover: {
mode: 'dataset',
},
}
})
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#3.8.2/dist/chart.min.js"></script>
<div id="hoverval"> </div>
<canvas id="myChart"></canvas>
Related
How to draw 2 datasets on the same Chart.js plot, but with different sizes?
one line is for daily points
the second line has points every 6 hours, i.e. 4 x more points
This doesn't work:
const ctx = document.getElementById('myChart').getContext('2d');
const data = {
labels: ["mon", "tue", "wed", "thu"],
datasets: [{
label: 'daily',
data: [65, 59, 80, 81],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}, {
label: 'every 6 hours',
data: [60, 61, 62, 61, 58, 57, 66, 44, 81, 87, 99, 13, 81, 80, 79, 78],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
In this codepen I randomly found it nearly works but I don't think it's the standard way,because when you hover one red bar, it shows the tooltip as expected, but also shows the tooltip for a distant unrelated point, which is not good.
Note: I have already read ChartJS - Line Chart with different size datasets but the result is not good (see the answer's screenshot's x-axis which is unreadable).
To avoid to have the hovering on the unrelated points, you could try to set the hover options, like the following:
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
hover: { // <-- to add
mode: 'nearest'
},
tooltips: {
mode: 'nearest',
intersect: true
},
...
}
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
// returns a random integer between 0 and 10 inclusive
var getRandomValue = function() {
min = Math.ceil(0);
max = Math.floor(50);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// generates a value for each hour in a week
var generateData = function(n) {
var data = [];
for (var i = 0; i < n; i++) {
data.push({
x: i,
y: getRandomValue()
});
}
return data;
};
var hourlyData = generateData(168);
var dailyData = generateData(7);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
type: 'line',
label: 'Daily',
borderColor: chartColors.red,
data: dailyData,
borderWidth: 2,
fill: false
}, {
type: 'line',
label: 'Hourly',
borderColor: chartColors.green,
backgroundColor: chartColors.green,
borderWidth: 1,
fill: false,
pointRadius: 0,
xAxisID: 'x-axis-2',
data: hourlyData
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
hover: {
mode: 'nearest'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
}],
yAxes: [{
ticks: {
min: 0,
max: 50
}
}]
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I have four chart.js charts on one page rendering fine. Each chart is sitting on a separate div with heavy content. But they load all at once, so when you scroll to the bottom of the section, you don't see the charts' animation anymore.
Is there a way to load each chart when the users scroll close to that section?
// setup
const data = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: '% of Respondents',
data: [55, 51, 46, 36],
backgroundColor: [
'rgba(79, 38, 131, 0.8)',
'rgba(79, 38, 131, 0.6)',
'rgba(79, 38, 131, 0.4)',
'rgba(79, 38, 131, 0.2)'
]
}]
};
const data2 = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: '% of Respondents',
data: [55, 51, 46, 36],
backgroundColor: [
'rgba(79, 38, 131, 0.8)',
'rgba(79, 38, 131, 0.6)',
'rgba(79, 38, 131, 0.4)',
'rgba(79, 38, 131, 0.2)'
]
}]
};
// config for myChart
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
},
indexAxis: 'y'
}
};
// render myChart
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// config for myChart2
const config2 = {
type: 'bar',
data: data2,
options: {
scales: {
y: {
beginAtZero: true
}
},
indexAxis: 'y'
}
};
// render myChart2
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="blankDiv" style="height: 700px;width: 100%;">
Scroll Down to See the chart
</div>
<div style="max-width: 70em;">
<canvas id="myChart"></canvas>
</div>
<div class="blankDiv" style="height: 700px;width: 100%;">
Scroll Down to See the chart
</div>
<div style="max-width: 70em;">
<canvas id="myChart2"></canvas>
</div>
You can use the deferred plugin for this:
Chart.register(ChartDeferred);
const data = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: '% of Respondents',
data: [55, 51, 46, 36],
backgroundColor: [
'rgba(79, 38, 131, 0.8)',
'rgba(79, 38, 131, 0.6)',
'rgba(79, 38, 131, 0.4)',
'rgba(79, 38, 131, 0.2)'
]
}]
};
const data2 = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: '% of Respondents',
data: [55, 51, 46, 36],
backgroundColor: [
'rgba(79, 38, 131, 0.8)',
'rgba(79, 38, 131, 0.6)',
'rgba(79, 38, 131, 0.4)',
'rgba(79, 38, 131, 0.2)'
]
}]
};
// config for myChart
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
},
indexAxis: 'y'
}
};
// render myChart
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// config for myChart2
const config2 = {
type: 'bar',
data: data2,
options: {
scales: {
y: {
beginAtZero: true
}
},
indexAxis: 'y'
}
};
// render myChart2
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred#2.0.0 "></script>
<div class="blankDiv" style="height: 700px;width: 100%;">
Scroll Down to See the chart
</div>
<div style="max-width: 70em;">
<canvas id="myChart"></canvas>
</div>
<div class="blankDiv" style="height: 700px;width: 100%;">
Scroll Down to See the chart
</div>
<div style="max-width: 70em;">
<canvas id="myChart2"></canvas>
</div>
Suppose x1={1,4,7,9} | y1={10,20,35,40} and x2={2,3,6,9} | y2={15,23,30,35}. Now I want to draw a line chart in chart.js for it.
P.S. Scatter chart is not a solution because my website is generating data dynamically so I have to provide data in array only and scatter requires the data in very sophisticated manner.
My simple question is by any way, can we have different x axis points in line chart for different lines??
code for your reference:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues1 = [50,60,70,80,90,100,110,120,130,140,150];
var yValues1 = [7,8,8,9,9,9,10,11,14,14,15];
var xValues2 = [54,64,74,84,94,104,114,124,134,144,154];
var yValues2 = [8,9,9,10,10,10,11,12,15,15,16];
new Chart("myChart", {
type: "line",
data: {
labels: xValues1,
datasets: [{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues1
},
{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues2
}
]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
(for yvalues2, I want xvalues2)
You can add a second X axis for your other labels:
const xValues1 = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yValues1 = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
const xValues2 = [54, 64, 74, 84, 94, 104, 114, 124, 134, 144, 154];
const yValues2 = [8, 9, 9, 10, 10, 10, 11, 12, 15, 15, 16];
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: yValues1,
borderColor: 'pink'
},
{
label: '# of Points',
data: yValues2,
borderColor: 'orange',
xAxisID: 'x2' // Match dataset to other axis
}
]
},
options: {
scales: {
xAxes: [{
type: 'category',
labels: xValues1,
id: 'x',
display: true // Set to false to hide the axis
},
{
type: 'category',
labels: xValues2,
id: 'x2',
display: true // Set to false to hide the axis
}
]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Using chartjs, I setup the following chart:
function myFunction(){
var options = {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
data: [26, 26, 29, 28, 29],
borderWidth: 2,
fill: false,
lineTension: 0
},
{
data: [26, 26, 33, 28, 30],
borderWidth: 2,
fill: false,
lineTension: 0,
}
]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
I want to move the points and the x-axis numbers to the right, sothat they are positioned between the axis lines. (like: 1 between 1 and 2; 2 between 2 and 3; etc.) See below:
How can I do this?
Here is how you can do this :
ꜰɪʀꜱᴛ
Set default chart type to bar , like so :
var options = {
type: 'bar',
data: {
...
ꜱᴇᴄᴏɴᴅ
Set first dataset's type to line , as such :
...
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
function myFunction() {
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
borderColor: 'rgba(0, 119, 220, 1)',
borderWidth: 2,
fill: false,
lineTension: 0
}, {
data: [26, 26, 33, 28, 30],
borderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
myFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartJSContainer"></canvas>
I'm creating a Chart.js bar chart like so:
HTML
<canvas id="priceComplianceBarChart" width="540" height="360"></canvas>
JQUERY
var barChartData = {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}
]
}
var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var myBarChart = new Chart(ctxBarChart).Bar(barChartData);
That produces a chart that looks like this:
What I want instead, though, is the two side-by-side values to appear stacked onto the same bar, in different colors, and then a calculated value (% of the total which is represented by the predominant color) to be added as a label on each bar and appended to the legends, too (such as, "Bix Produce - 99.9%").
The appending of the val to the legend labels below the bars I can figure out myself, I'm sure, but how to stack the two values onto one bar, and how to add the label to the bars - I have no idea how to accomplish those objectives.
UPDATE
I'm trying Sergiu M's code, but must be doing something wrong, because my div in which the chart should appear is now completely blank. Here is my new code:
HTML
<div class="topright">
<h2 class="sectiontext">Price Compliance</h2>
<div class="graph_container">
<canvas id="priceComplianceBarChart" width="400" height="400"></canvas>
</div>
</div>
CSS
.topright {
margin-top: -4px;
margin-right: 16px;
margin-bottom: 16px;
margin-left: -12px;
padding: 16px;
border: 1px solid black;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
JQUERY
var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var priceBarChart = new Chart(ctxBarChart, {
type: 'bar',
data: {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [{
label: 'Some Values',
backgroundColor: 'rgba(97, 188, 109, 0.2)',
borderColor: 'rgba(97, 188, 109, .8)',
data: [7000, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
//data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
}, {
label: 'Other Values',
backgroundColor: 'rgba(236, 107, 86, 0.2)',
borderColor: 'rgba(236, 107, 86, .8)',
data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
//data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}]
},
options: {
tooltips: {
enabled: false
},
animation: {
duration: 0,
onComplete: function () {
if (this.data.datasets.length === 2) {
// render the value of the chart above the bar
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var firstDataSet = this.data.datasets[0];
var secondDataSet = this.data.datasets[1];
if (firstDataSet.length === secondDataSet.length) {
for (var i = 0; i < firstDataSet.data.length; i++) {
var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
var total = firstDataSet.data[i] + secondDataSet.data[i];
if (firstDataSet.data[i] >= secondDataSet.data[i]) {
ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
} else {
ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
}
}
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}],
xAxes: [{
stacked: true,
}]
}
}
});
in order to achieve a stacked bar chart with chart js you can use this code http://codepen.io/anon/pen/ozzyJy. I have replaced the second data values array with some bigger values in order to illustrate the stacked bars, but it will work fine with any values:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [{
backgroundColor: 'rgba(97, 188, 109, 0.2)',
borderColor: 'rgba(97, 188, 109, .8)',
data: [7000, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
}, {
backgroundColor: 'rgba(236, 107, 86, 0.2)',
borderColor: 'rgba(236, 107, 86, .8)',
data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
//data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}]
},
options: {
tooltips: {
enabled: false
},
animation: {
duration: 0,
onComplete: function() {
if (this.data.datasets.length === 2) {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var firstDataSet = this.data.datasets[0];
var secondDataSet = this.data.datasets[1];
if (firstDataSet.length === secondDataSet.length) {
for (var i = 0; i < firstDataSet.data.length; i++) {
var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
var total = firstDataSet.data[i] + secondDataSet.data[i];
if (firstDataSet.data[i] >= secondDataSet.data[i]) {
ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
}else{
ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
}
}
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}],
xAxes: [{
stacked: true,
}]
}
}
});