Develop Reference

Add an feature DateOfTheDay in my Chart.js

I looked for a lot of things to add a feature to my chart but
I couldn't find it in the documentation or here,
I would like to add a visual addition of today's date, on the bottom legend for example,
does anyone have any examples or ideas? thank you in advance
new Chart(canvas, {
type: 'line',
data: {
labels: [ <?php echo $txt_labels; ?> ],
datasets: [{
label: 'Réelle',
yAxisID: 'A',
data: [ <?php echo $txt_series1; ?> ],
borderColor: 'rgba(238, 121, 83, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(238, 121, 83, 1)",
pointRadius: 5,
}, {
label: 'Attendue',
yAxisID: 'B',
data: [ <?php echo $txt_series2; ?> ],
borderColor: 'rgba(167, 172, 200, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(167, 172, 200, 1)",
pointRadius: 5,
}]
},
options: {
animation: {
animateScale: true,
animateRotate: true,
duration: 1500,
easing: 'easeInOutSine',
},
scales: {
x:{
grid: {
borderColor: 'rgba(16, 16, 18, 0.5)',
offset: true,
},
},
A: {
type: 'linear',
position: 'left',
grid: {
display: false,
borderColor: 'rgba(16, 16, 18, 0.5)',
},
ticks: {
font: {
size: 14,
},
callback: function(value, index, values) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
},
},
B: {
type: 'linear',
position: 'right',
}
},
},
},
}
});

ChartJS Bar Chart is too short

I want the chart to be much larger regardless of the values. Currently, the chart is the height in the picture and it does not change. This is the complete configuration for the chart I currently have. Is it possible for the chart to have more height regardless of the dataset values?
const KYCctx = document.getElementById('kycChart').getContext('2d');
const KYCChart = new Chart(KYCctx, {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
console.log(chart);
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
}
)
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});

You could explicitly define the height on the canvas.
<canvas id="kycChart" height="400"></canvas>
const KYCChart = new Chart('kycChart', {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
})
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="kycChart" height="400"></canvas>

Horizontal bar with two yaxes chart js

I want to do an horizontal bar with 2 yaxes, Where a bar can have a positive or negative value and positive side has a yaxis and the negative side has other yaxis like the image
This is my code JSFiddle.
I can't change the names of the second yaxes
I add arrays with the same values because i would want two yaxes, It is not necessary to use "chart.js" if you knows other library where i can it use, please tell me
var canvas = document.getElementById('myChart');
var extremo1=[-5, 3, 9, -11];
var extremo2=[-5, 3, 9, -11];
var data = {
labels: ["Visua_Verbal", "Secuencial_Global", "Sensitivo_Intuitivo", "Reflexivo_Activo"],
datasets: [
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
},
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
}
]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
position: "left",
display: true,
ticks: {
callback:(label,index,labels)=>{
label = label.match(/_(\w*)/)[1];
return label;
}}
},
{
position: "right",
display: true,
ticks: {
callback:(label,index,labels)=>{
return label ;
}
}
}]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas,{
type: 'horizontalBar',
data:data,
options:option
});

In the snippet below I've set the options labels, type, offset on the y-axes to achieve the result you want. I've also removed unnecessary properties.
var canvas = document.getElementById('myChart');
var extremo = [-5, 3, 9, -11];
var data = {
datasets: [{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
labels: ['Verbal', 'Global', 'Reflexivo', 'Sensitivo']
},
{
position: 'right',
labels: ['Visual', 'Secuencial', 'Activo', 'Intuitivo'],
gridLines: {
display: false
},
type: 'category',
offset: true
}
]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas, {
type: 'horizontalBar',
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart">

Chartjs doughnut chart with gradient color

I created a doughnut chart. Is there any chance to make that colors like gradient ? I saw this post, I tried to implement on my own chart but I could not.
Any help, I will be grateful.
var ctx = $('#teamDoughnutChart');
var doughnutBar = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Status",
backgroundColor: [
'rgba(192, 57, 43,1)',
'rgba(244, 187, 18, 1)',
'rgba(41, 128, 185,1)',
'rgba(39, 174, 96,1)',
'rgba(191, 199, 215, 1)'
],
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38, 96, 79, 41]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
<canvas id="teamDoughnutChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I have a same problem. I found solution. Try this
var canvas = $('#teamDoughnutChart');
var ctx = canvas.getContext('2d');
var gradientColors = [
{
start: '#f3bb98',
end: '#ea8ba9'
},
{
start: '#F6A064',
end: '#ED5384'
}
];
var gradients = [];
gradientColors.forEach( function( item ){
var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
gradient.addColorStop(0, item.start);
gradient.addColorStop(1, item.end);
gradients.push(gradient);
});
var doughnutBar = new Chart(canvas, {
type: 'doughnut',
data: {
labels: ["A", "B"],
datasets: [{
label: "Status",
backgroundColor: gradients,
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});

Remove blank space in chart.js chart

I have a standard horizontally stacked graph but it seem to have a big gap between the graph and the legend (represented by the big red circle bellow)
I have looked upon many configuration options but I can't find where does it come from
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
max: 82,
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
Edit : Woopsie, I had forgot to add the fiddle I made :
http://jsfiddle.net/uLUAT/1165/

Use
xAxes: [{
ticks: { max: 82 },
...
}]
instead of
xAxes: [{
max: 82,
...
}]
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
ticks: { max: 82 },
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>

http://jsfiddle.net/uLUAT/1166/
I tried different things but I cant fix it. Can you change your data? If your datas total equal 100 there is no problem I think
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
}, {
label: 'Open : 12 (5%)',
data: [30],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}]
},
http://jsfiddle.net/uLUAT/1167/ I created a function check out. You dont need to change values any more.
var total = 0;
var value = 0;
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
total += myBarChart.data.datasets[i].data[0]
}
value = (100 - total) / myBarChart.data.datasets.length
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
myBarChart.data.datasets[i].data[0] += value;
}
myBarChart.update();