Chartsjs : change font color of the text in the middle
0
I'm starting with Javascript and I'm creating a chart section for a website using Chart.js.
In the documentation I heard about "Plugins" and I tried to use them like I could to customize my charts. I got pretty good results even if I'm sure we can get the same result with a lot less lines of code.
There is still one thing that I can't do right now:
1) I can't change the color of the text (percentage) in the center of the chart.
I tried to use the "fontColor" option and the Chart.defaults.global.defaultFontColorbut it didn't change the black color. And I wasn't able to create a plugin to modify this property.
I saw some examples here but the way I did it couldn't match these examples.
Thank you for your consideration.
See the section here: JSFiddle
Here is the JS code :
// Plugins
var number1 = "100"
var number2 = "75"
var number3 = "50"
var plugin1 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number1 + '%';
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin2 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number2 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin3 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number3 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
// Chart 1
var canvas1 = document.getElementById('myChart1').getContext('2d');
var chart1Data = {
datasets: [ {
data: [100, 0],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart1Options = {
responsive: true,
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView = false;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart1')) {
if (inView) {
return;
}
inView = true;
new Chart(canvas1, {
type: 'doughnut',
data: chart1Data,
options: chart1Options,
plugins: [plugin1]
});
} else {
inView = false;
}
});
// Chart 2
var canvas2 = document.getElementById('myChart2').getContext('2d');
var chart2Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart2Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView2 = false;
function isScrolledIntoView(elem) {
var docViewTop2 = $(window).scrollTop();
var docViewBottom2 = docViewTop2 + $(window).height();
var elemTop2 = $(elem).offset().top;
var elemBottom2 = elemTop2 + $(elem).height();
return ((elemTop2 <= docViewBottom2) && (elemBottom2 >= docViewTop2));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart2')) {
if (inView2) {
return;
}
inView2 = true;
new Chart(canvas2, {
type: 'doughnut',
data: chart2Data,
options: chart2Options,
plugins: [plugin2]
});
} else {
inView2 = false;
}
});
//Chart 3
var canvas3 = document.getElementById('myChart3').getContext('2d');
var chart3Data = {
datasets: [ {
data: [50, 50],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart3Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView3 = false;
function isScrolledIntoView(elem) {
var docViewTop3 = $(window).scrollTop();
var docViewBottom3 = docViewTop3 + $(window).height();
var elemTop3 = $(elem).offset().top;
var elemBottom3 = elemTop3 + $(elem).height();
return ((elemTop3 <= docViewBottom3) && (elemBottom3 >= docViewTop3));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart3')) {
if (inView3) {
return;
}
inView3 = true;
new Chart(canvas3, {
type: 'doughnut',
data: chart3Data,
options: chart3Options,
plugins: [plugin3]
});
} else {
inView3 = false;
}
});
//Chart 4
var canvas4 = document.getElementById('myChart4').getContext('2d');
var chart4Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart4Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView4 = false;
function isScrolledIntoView(elem) {
var docViewTop4 = $(window).scrollTop();
var docViewBottom4 = docViewTop4 + $(window).height();
var elemTop4 = $(elem).offset().top;
var elemBottom4 = elemTop4 + $(elem).height();
return ((elemTop4 <= docViewBottom4) && (elemBottom4 >= docViewTop4));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart4')) {
if (inView4) {
return;
}
inView4 = true;
new Chart(canvas4, {
type: 'doughnut',
data: chart4Data,
options: chart4Options,
plugins: [plugin2],
});
} else {
inView4 = false;
}
});
javascript plugins colors chart.js
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
add a comment |
0
I'm starting with Javascript and I'm creating a chart section for a website using Chart.js.
In the documentation I heard about "Plugins" and I tried to use them like I could to customize my charts. I got pretty good results even if I'm sure we can get the same result with a lot less lines of code.
There is still one thing that I can't do right now:
1) I can't change the color of the text (percentage) in the center of the chart.
I tried to use the "fontColor" option and the Chart.defaults.global.defaultFontColorbut it didn't change the black color. And I wasn't able to create a plugin to modify this property.
I saw some examples here but the way I did it couldn't match these examples.
Thank you for your consideration.
See the section here: JSFiddle
Here is the JS code :
// Plugins
var number1 = "100"
var number2 = "75"
var number3 = "50"
var plugin1 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number1 + '%';
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin2 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number2 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin3 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number3 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
// Chart 1
var canvas1 = document.getElementById('myChart1').getContext('2d');
var chart1Data = {
datasets: [ {
data: [100, 0],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart1Options = {
responsive: true,
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView = false;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart1')) {
if (inView) {
return;
}
inView = true;
new Chart(canvas1, {
type: 'doughnut',
data: chart1Data,
options: chart1Options,
plugins: [plugin1]
});
} else {
inView = false;
}
});
// Chart 2
var canvas2 = document.getElementById('myChart2').getContext('2d');
var chart2Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart2Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView2 = false;
function isScrolledIntoView(elem) {
var docViewTop2 = $(window).scrollTop();
var docViewBottom2 = docViewTop2 + $(window).height();
var elemTop2 = $(elem).offset().top;
var elemBottom2 = elemTop2 + $(elem).height();
return ((elemTop2 <= docViewBottom2) && (elemBottom2 >= docViewTop2));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart2')) {
if (inView2) {
return;
}
inView2 = true;
new Chart(canvas2, {
type: 'doughnut',
data: chart2Data,
options: chart2Options,
plugins: [plugin2]
});
} else {
inView2 = false;
}
});
//Chart 3
var canvas3 = document.getElementById('myChart3').getContext('2d');
var chart3Data = {
datasets: [ {
data: [50, 50],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart3Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView3 = false;
function isScrolledIntoView(elem) {
var docViewTop3 = $(window).scrollTop();
var docViewBottom3 = docViewTop3 + $(window).height();
var elemTop3 = $(elem).offset().top;
var elemBottom3 = elemTop3 + $(elem).height();
return ((elemTop3 <= docViewBottom3) && (elemBottom3 >= docViewTop3));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart3')) {
if (inView3) {
return;
}
inView3 = true;
new Chart(canvas3, {
type: 'doughnut',
data: chart3Data,
options: chart3Options,
plugins: [plugin3]
});
} else {
inView3 = false;
}
});
//Chart 4
var canvas4 = document.getElementById('myChart4').getContext('2d');
var chart4Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart4Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView4 = false;
function isScrolledIntoView(elem) {
var docViewTop4 = $(window).scrollTop();
var docViewBottom4 = docViewTop4 + $(window).height();
var elemTop4 = $(elem).offset().top;
var elemBottom4 = elemTop4 + $(elem).height();
return ((elemTop4 <= docViewBottom4) && (elemBottom4 >= docViewTop4));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart4')) {
if (inView4) {
return;
}
inView4 = true;
new Chart(canvas4, {
type: 'doughnut',
data: chart4Data,
options: chart4Options,
plugins: [plugin2],
});
} else {
inView4 = false;
}
});
javascript plugins colors chart.js
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
1
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19
add a comment |
0
0
0
I'm starting with Javascript and I'm creating a chart section for a website using Chart.js.
In the documentation I heard about "Plugins" and I tried to use them like I could to customize my charts. I got pretty good results even if I'm sure we can get the same result with a lot less lines of code.
There is still one thing that I can't do right now:
1) I can't change the color of the text (percentage) in the center of the chart.
I tried to use the "fontColor" option and the Chart.defaults.global.defaultFontColorbut it didn't change the black color. And I wasn't able to create a plugin to modify this property.
I saw some examples here but the way I did it couldn't match these examples.
Thank you for your consideration.
See the section here: JSFiddle
Here is the JS code :
// Plugins
var number1 = "100"
var number2 = "75"
var number3 = "50"
var plugin1 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number1 + '%';
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin2 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number2 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin3 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number3 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
// Chart 1
var canvas1 = document.getElementById('myChart1').getContext('2d');
var chart1Data = {
datasets: [ {
data: [100, 0],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart1Options = {
responsive: true,
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView = false;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart1')) {
if (inView) {
return;
}
inView = true;
new Chart(canvas1, {
type: 'doughnut',
data: chart1Data,
options: chart1Options,
plugins: [plugin1]
});
} else {
inView = false;
}
});
// Chart 2
var canvas2 = document.getElementById('myChart2').getContext('2d');
var chart2Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart2Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView2 = false;
function isScrolledIntoView(elem) {
var docViewTop2 = $(window).scrollTop();
var docViewBottom2 = docViewTop2 + $(window).height();
var elemTop2 = $(elem).offset().top;
var elemBottom2 = elemTop2 + $(elem).height();
return ((elemTop2 <= docViewBottom2) && (elemBottom2 >= docViewTop2));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart2')) {
if (inView2) {
return;
}
inView2 = true;
new Chart(canvas2, {
type: 'doughnut',
data: chart2Data,
options: chart2Options,
plugins: [plugin2]
});
} else {
inView2 = false;
}
});
//Chart 3
var canvas3 = document.getElementById('myChart3').getContext('2d');
var chart3Data = {
datasets: [ {
data: [50, 50],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart3Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView3 = false;
function isScrolledIntoView(elem) {
var docViewTop3 = $(window).scrollTop();
var docViewBottom3 = docViewTop3 + $(window).height();
var elemTop3 = $(elem).offset().top;
var elemBottom3 = elemTop3 + $(elem).height();
return ((elemTop3 <= docViewBottom3) && (elemBottom3 >= docViewTop3));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart3')) {
if (inView3) {
return;
}
inView3 = true;
new Chart(canvas3, {
type: 'doughnut',
data: chart3Data,
options: chart3Options,
plugins: [plugin3]
});
} else {
inView3 = false;
}
});
//Chart 4
var canvas4 = document.getElementById('myChart4').getContext('2d');
var chart4Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart4Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView4 = false;
function isScrolledIntoView(elem) {
var docViewTop4 = $(window).scrollTop();
var docViewBottom4 = docViewTop4 + $(window).height();
var elemTop4 = $(elem).offset().top;
var elemBottom4 = elemTop4 + $(elem).height();
return ((elemTop4 <= docViewBottom4) && (elemBottom4 >= docViewTop4));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart4')) {
if (inView4) {
return;
}
inView4 = true;
new Chart(canvas4, {
type: 'doughnut',
data: chart4Data,
options: chart4Options,
plugins: [plugin2],
});
} else {
inView4 = false;
}
});
javascript plugins colors chart.js
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
I'm starting with Javascript and I'm creating a chart section for a website using Chart.js.
In the documentation I heard about "Plugins" and I tried to use them like I could to customize my charts. I got pretty good results even if I'm sure we can get the same result with a lot less lines of code.
There is still one thing that I can't do right now:
1) I can't change the color of the text (percentage) in the center of the chart.
I tried to use the "fontColor" option and the Chart.defaults.global.defaultFontColorbut it didn't change the black color. And I wasn't able to create a plugin to modify this property.
I saw some examples here but the way I did it couldn't match these examples.
Thank you for your consideration.
See the section here: JSFiddle
Here is the JS code :
// Plugins
var number1 = "100"
var number2 = "75"
var number3 = "50"
var plugin1 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number1 + '%';
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin2 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number2 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
var plugin3 = {
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 110).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = number3 + '%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
// Chart 1
var canvas1 = document.getElementById('myChart1').getContext('2d');
var chart1Data = {
datasets: [ {
data: [100, 0],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart1Options = {
responsive: true,
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView = false;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart1')) {
if (inView) {
return;
}
inView = true;
new Chart(canvas1, {
type: 'doughnut',
data: chart1Data,
options: chart1Options,
plugins: [plugin1]
});
} else {
inView = false;
}
});
// Chart 2
var canvas2 = document.getElementById('myChart2').getContext('2d');
var chart2Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart2Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView2 = false;
function isScrolledIntoView(elem) {
var docViewTop2 = $(window).scrollTop();
var docViewBottom2 = docViewTop2 + $(window).height();
var elemTop2 = $(elem).offset().top;
var elemBottom2 = elemTop2 + $(elem).height();
return ((elemTop2 <= docViewBottom2) && (elemBottom2 >= docViewTop2));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart2')) {
if (inView2) {
return;
}
inView2 = true;
new Chart(canvas2, {
type: 'doughnut',
data: chart2Data,
options: chart2Options,
plugins: [plugin2]
});
} else {
inView2 = false;
}
});
//Chart 3
var canvas3 = document.getElementById('myChart3').getContext('2d');
var chart3Data = {
datasets: [ {
data: [50, 50],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart3Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView3 = false;
function isScrolledIntoView(elem) {
var docViewTop3 = $(window).scrollTop();
var docViewBottom3 = docViewTop3 + $(window).height();
var elemTop3 = $(elem).offset().top;
var elemBottom3 = elemTop3 + $(elem).height();
return ((elemTop3 <= docViewBottom3) && (elemBottom3 >= docViewTop3));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart3')) {
if (inView3) {
return;
}
inView3 = true;
new Chart(canvas3, {
type: 'doughnut',
data: chart3Data,
options: chart3Options,
plugins: [plugin3]
});
} else {
inView3 = false;
}
});
//Chart 4
var canvas4 = document.getElementById('myChart4').getContext('2d');
var chart4Data = {
datasets: [ {
data: [75, 25],
backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
hoverBorderColor: ['#ffffff','#ffffff'],
borderWidth: [0, 0],
}]
};
var chart4Options = {
cutoutPercentage: 95,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var inView4 = false;
function isScrolledIntoView(elem) {
var docViewTop4 = $(window).scrollTop();
var docViewBottom4 = docViewTop4 + $(window).height();
var elemTop4 = $(elem).offset().top;
var elemBottom4 = elemTop4 + $(elem).height();
return ((elemTop4 <= docViewBottom4) && (elemBottom4 >= docViewTop4));
}
$(window).scroll(function () {
if (isScrolledIntoView('#myChart4')) {
if (inView4) {
return;
}
inView4 = true;
new Chart(canvas4, {
type: 'doughnut',
data: chart4Data,
options: chart4Options,
plugins: [plugin2],
});
} else {
inView4 = false;
}
});
javascript plugins colors chart.js
javascript plugins colors chart.js
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
edited Dec 30 '18 at 15:10
G. Delvigne
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
asked Dec 30 '18 at 14:39
G. DelvigneG. Delvigne
6319
6319
1
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19
add a comment |
1
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19
1
1
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53978528%2fchartsjs-change-font-color-of-the-text-in-the-middle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53978528%2fchartsjs-change-font-color-of-the-text-in-the-middle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Got it : I had to use ctx.fillStyle = 'rgba(118, 109, 255, 1)'; before ctx.fillText
– G. Delvigne
Dec 30 '18 at 16:19