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
}
}]
}
}
});
Related
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
https://jsfiddle.net/uL9jm103/
I've got a problem with chart.js: When the first data value is set to 12, it isn't shown on the graph. It is just 0. When the second is also 12, it isn't shown either. But when I change the first value to 11, both are shown.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Running','Swimming','Eating','Cycling'],
datasets: [{
data: [12,12,20,30]
}]
},
options: {
legend: {
display: false
}
}
});
BeginAtZero is set to false per default.
Just add
options: {
scale: {
ticks: {
beginAtZero: true
}
}
}
and you're fine.
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 created a horizontal grouped bar chart in Chart.js but am getting stuck on a weird problem.
The problem is that while I disabled all grid lines and borders the chart is still showing a top horizontal line which I would like to get rid off.
It is visible in this screenshot: http://imgur.com/41YGxA8.
I also made a JSFiddle: https://jsfiddle.net/bsocw1v9/
function create_horizontal_bar_chart(){
/**
* Draw the chart on the correct canvas. Add the correct data sets
* and set the correct draw type.
*/
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
{
type: 'horizontalBar',
backgroundColor: "rgb(0,33,86)",
data: [2250],
stack: 1
},
{
type: 'horizontalBar',
backgroundColor: "rgb(219,219,219)",
data: [3000],
stack: 2
},
{
type: 'horizontalBar',
backgroundColor: "rgb(240,95,0)",
data: [750],
stack: 3
},
]
};
new Chart(ctx, {
type: 'horizontalBar',
data: data,
showScale: false,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
stacked: true,
display: false,
gridLines: {
drawBorder: false,
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.9,
gridLines: {
drawBorder: false,
},
}]
}
}
});
}
I hope someone could help me with this problem as I simply can't figure out whats causing this.
You have only disabled borders on the edge of the chart (by setting drawBorder to false), not grid lines. The line that bugs you is a grid line. To disable grid lines for an axis use:
gridLines: {
display: false
}
Look at the docs under "Grid Line Configuration".
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.