Options won't load in chart.js - javascript

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

Charts.js : How to remove the Vertical Black lines in Bar Chart

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

Chart data isnt showing in the canvas but console.log shows the expected values

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();
}

How to remove the coloured rectangle(dataset label) in chartJS

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
}
}]
}
}
});

Where do I use chartjs's destroy function?

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.

Too much space left before x-axis in char js bar chart

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.

Categories

Resources