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?
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'm trying to make a radar chart with a dark background. White index labels distract from the chart itself.
(my chart)
I found a thread that raised a question about customizing index labels, but the code in the answer only works with version 2.1.3 or mb close to it.
Is it possible in chart.js#3.5.1?
You need to set display to false in the ticks like so:
const options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
r: {
angleLines: {
display: false
},
grid: {
display: false
},
ticks: {
display: 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.7.1/chart.js"></script>
</body>
I am using Chart.js to draw a simple line chart.
How can I make small grid lines on top of the xAxis labels?
The documentation for Line Chart is here: https://www.chartjs.org/docs/2.7.3/getting-started/?h=line, but I can't find anything about it.
I removed the XAxis and YAxis grid lines.
This is an example of the small grid lines wanted:
Thanks in advance.
Instead of removing the gridlines you can set the drawOnChartArea to false:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
x: {
grid: {
drawOnChartArea: false
}
},
y: {
grid: {
drawOnChartArea: false
}
}
}
},
}
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.6.2/chart.js"></script>
</body>
I have this plot in matplotlib python, this is a histogram and some specifics functions. I'm trying the same plot with ChartJS using bar/line mixed chart. The problem is that the the x-axis points have to be the same for both graphs and the form of the function is not achieved. Is this plot possible in Chart JS. If not, what libraries can I use?
Yes this is possible by using a second x axis with the same labels but the offset and display set to false:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'bar',
data: {
labels,
datasets: [{
type: 'line',
xAxisID: 'x2',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
},
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
}
]
},
options: {
scales: {
x: {},
x2: {
labels,
offset: false,
display: 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.5.1/chart.js"></script>
</body>
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: {