I'm trying to create a graphic in my .html file in the altervista ftp.
Here's my code:
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
...
],
borderColor: [
'rgba(255,99,132,1)',
...
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Why I'm getting nothing in canvas?
Also the console does not show errors.
You should remove the ... under backgroundColor and borderColor or add colors according to the number of labels.
You need to call myChart.update() after initializing the chart.
I solved my error editing the first script from this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />
to this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" ></script>
as suggested by #j.ian.le
And adding
responsive: false,
under options: {
Related
I have a little experience with chartjs but I am unable to find a way to hide the default line. I'm adding this image here which I need to fix.
I need to hide the line like this one
https://i.stack.imgur.com/UXMpi.png.
I need to make it like this one
https://i.stack.imgur.com/Phsos.png
If anyone knows how to do this, please let me know. Thanks.
set display to false in the grid settings of the x axis and drawBorder to false in both axes like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
drawBorder: false
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>
I started a project on our SharePoint. My plan was to create a dynamic chart with Chart.js in the script editor webpart. First I used fixed datasets to test the basics.
My problem is, that there is no result shown on the site. The site is blank at all. I tried the code at jsfiddle and it worked fine.
I also tried it with uploading Chart.js to our Sharepoint and refer to the uploaded file but nothing happens...
Here my code:
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" ></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255,99,132,1)'],
borderWidth: 1
}]
},
options: {responsive:false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Does anyone have an idea why this doesn't work on SharePoint?
I'm creating an stack bar chart using chart.js. I need to hide the labels which don't have data on the current chart. As an example I want to only show "Prediction Success" label as data related to other labels are not there for the current date range. How can we do that?
You can use the legend filter like this:
var options = {
type: 'bar',
data: {
labels: ["Red", "Yellow", "Blue", "Yellow", "Green", "Purple", "Orange", "Green"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 0, 5, 6],
borderWidth: 1,
backgroundColor: 'red'
},
{
label: '# of NonVotes',
data: [],
borderWidth: 1,
backgroundColor: 'blue'
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (legendItem, chartData) => (legendItem, chartData, chartData.datasets[legendItem.datasetIndex].data.length > 0)
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>
I trying to use Chart.js in my web, but the chart won't appear and there's no error code in chrome console. I'm using Chart.js v2.7.2.
I tried any solution but doesn't help me, i also copy the code from chart.js documentation. what's wrong?
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Try this:
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: false, // change to true
title:{
text: "Basic Column Chart"
},
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
</body>
</html>
I am trying to fill the area between two lines in a line chart using Chart.js. Like this:
There is already an answer here, that explains how to extend chartjs to do this.
But I know this feature is now native in V2 (from this thread on the github issues page), the problem is I just can't find documentation referring to this.
Is there a section about this in the doc? Anyone know how to use this feature?
Thanks!
Make sure you import the 2.6.0 version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
Then follow the rules as described here: http://www.chartjs.org/docs/latest/charts/area.html
Below is an example, and how it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My two lines with colour between them</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="mychart" width="300" height="200"></canvas>
<script>
var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas)
var config = { //configure the chart
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: "Min",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: false, //no fill here
data: [5, 5, 3, 2]
},
{
label: "Max",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: '-1', //fill until previous dataset
data: [8, 7, 6, 5]
}]
},
options: {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
};
var chart = new Chart(ctx, config);
</script>
</body>
</html>
Setting fill property to +1 of a dataset will set the backgroundColor from this line to the next line in dataset.
datasets: [{
label: 'Systolic Guideline',
data: [],
fill: '+1',
borderColor: '#FFC108',
backgroundColor: 'rgba(255,193,8,0.2)'
},
{
label: 'Diastolic Guideline',
data: [],
fill: true,
borderColor: '#FFC108',
backgroundColor: 'rgba(0,0,0,0)'
}]
See this: https://www.chartjs.org/samples/latest/charts/area/line-datasets.html
Here is a small plugin that can do shading between any two dataset lines.
https://stackoverflow.com/a/41733045/852977