For some reason al my options will not be shown in the chart. Can't find the error myself. The code of the chart is a snippet from this code: https://codepen.io/sietssoo/pen/oNqGpXq
If anyone could find the error, you would be my hero.
//Making chart
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: getChartData(),
options: {
legend: {display: true},
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + '€ ' + tooltipItem.yLabel;
}
}
},
scales: {
x: [{
stacked: true,
scaleLabel: {
isplay: true,
labelString: 'Jaar'
}
}],
y: [{
stacked: true,
scaleLabel: {display: true},
ticks: {
callback: function (value) {
return '€' + value;
}
}
}]
}
}
});
That is because you are using V2 syntax in V3.
the legend and tooltip config have been moved to the options.plugins.legend and options.plugins.tooltip namespace, the scales are not arrays anymore all scales are their own object.
For all the changes and detailed explanation you can read the migration guide
Related
How can I remove the vertical black lines, which are getting displayed both sides of bars in the bar chart?
I tried both
options : {
scaleShowVerticalLines: false
}
options : {
scales : {
xAxes : [ {
gridLines : {
display : false
}
} ]
}
}
here is my code lines:
//Chart Axis's
let scales = {
xAxes: [{
gridLines: { display: false },
ticks: {
font: {
size: config.size,
},
color: "white",
},
}],
yAxes: [{
ticks: {
beginAtZero:true
},
}]
};
let ctx = document.getElementById('how_i_spend_canvas');
if (ctx) { // DOM element is present and not null
let categoriesChart = new Chart(ctx.getContext('2d'), {
type: 'bar',
data: howISpendChartdata,
// Chart pulgins & Options
plugins: [ChartDataLabels],
options: {
scales: scales,
responsive: true,
maintainAspectRatio: false,
aspectRatio: 2,
plugins: plugins,
}
}
onClick: function (evt, element) {}
but iy didn't work for me.
Reference where the arrow is pointing the lines.
Got the Answer now as in Chart JS 3 they have changed to grid instead of the common gridlines command.
Now in chart JS 3 can use :
x: {
grid:{
color:'red',
display: false,
}
},
y:{
ticks: {
beginAtZero: true
},
grid: {
color: 'green',
display: true,
}
}
Result ScreenShot
So its my first time using chartjs. Im trying to use stacked horizontal charts. I have 2 values which I calculate using some sort function. I do console.logs to check if values are correct and they are both as expected. But when i try to update the chart only the first value shows in the canvas, and the 2nd value shows 0 but my chart gridlines adjusts correctly. Im not too sure what is happening.
Here is where I declare my chart data
var eventDays1 = 0;
var eventDays2 = 0;
var barChartData = {
labels: ['Events'],
datasets: [{
label: eventName1,
backgroundColor: "#E5C1BD",
data:[eventDays1]
}, {
label: eventName2,
backgroundColor: "#D2D0BA",
data:[eventDays2]
}
]};
Here is the actual chart
myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: barChartData,
options: {
legend: {
display: true,
labels: {
fontColor: 'black',
fontSize:20,
}
},
responsive: true,
scales: {
xAxes: [{ stacked: false,
ticks:{
fontColor:"black"
},
scaleLabel: {
display: true,
labelString: 'Days',
fontColor:"black"
}
}],
yAxes: [{
ticks: {
beginAtZero:true,
max:365,
fontColor:"black"
},
stacked: true,
}]
}
},
});
Here is my updateChart function that I call. Note that the console.logs
are values that I expect already.
function updateChart(newList){
eventDays1 = newList[0];
if(newList.length == 2){
eventDays2 = newList[1];
}
myBarChart.data.datasets[0].data[0] = eventDays1;
myBarChart.data.datasets[0].data[1] = eventDays2;
console.log("data 1 "+eventDays1);
console.log("data 2 "+eventDays2);
myBarChart.update();
}
I have used the chartjs 2.8 and drew a Bar chart using the same. There is one rectangle coming above the chart with filled color (https://imgur.com/a/fj8q0Tl). I have tried multiple ways to remove that but fails.
I have tried the below code but no luck.
legend: {
display: false,
}
Here is my current code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData1,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Could you anyone please tell me how to remove that?
It should be this, if it doesnt work you aren't on version 2 or something else is wrong.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData1,
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I'm using VueJS.
I have a problem with my chartJS's stacking and jumping between two bar charts when I hover over the chart, it flicks between two different charts.
I've read about the .destroy() built in function, but I'm not sure where to call it. Whenever I try to use it, it says my chart is undefined. This is the code I'm using to render my chart:
var ctx = document.getElementById("month-visits-chart").getContext('2d');
myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dayMonth,
backgroundColor: '#FFFFFF',
backgroundColor: '#FFFFFF',
datasets: [{
label: 'Visits per day per for ' + this.monthName,
data: visits,
backgroundColor: '#CC0033',
borderColor: [
],
borderWidth: 1
}]
},
options: {
'onClick' : (evt, item) => {
var day = item[0]['_model'].label
this.selectedDay = day
this.renderHourlyBarChart();
},
title: {
display: true,
text: 'Visits per day per for ' + this.monthName
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Visits'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Day'
}
}]
}
}
});
},
Where would I use the .destroy() function that will make it not be returned undefined?
You should call the .destroy() on your myBarChart variable when you change the selection in the dropdown box.
This is driving me crazy! need some help,
The x-axis has been moved too much from it's to be position. Need help to figure it out my code is:
$.ajax({
type:'GET',
url:'/xxx/xxxxx',
dataType:'json',
success:function(result){
var response = { labels:[],datasets:[{label: '# of Deficiency', data: [],backgroundColor: '#00c0ef',hoverBackgroundColor: 'rgba(0,192,239,0.7)'}]};
for (i = 0; i<result.data.length; i++){
response.labels.push(result.data[i].title);
response.datasets[0].data.push(result.data[i].total_deficiency);
}
var ctxDefRank = $('canvas[id=defRank]');
var myChart = new Chart(ctxDefRank, {
type: 'bar',
data: response,
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Deficiency Rank'
},
ticks: {
beginAtZero:true
}
}],
xAxes: [{
ticks: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Items'
},
}]
},
responsive: true,
tooltips: {caretSize:2}
}
});
}
});
The same code is executing for an another graph with less data is working perfect but with this there is a problem.