I am setting the following default in Chartjs (v2.9.3) to alter the default look of my bar charts:
Chart.defaults.bar.scales.xAxes[0].categoryPercentage = .95;
This causes the following deprecation warnings:
bar chart: "scales.[x/y]Axes.categoryPercentage" is deprecated. Please use "dataset.categoryPercentage" instead
But I can't get that to work, amongst others I have tried:
Chart.defaults.bar.dataset.categoryPercentage = 1;
Chart.defaults.bar.datasets[0].categoryPercentage = 1;
Chart.defaults.global.bar.dataset.categoryPercentage = 1;
Chart.defaults.global.bar.datasets[0].categoryPercentage = 1;
Is there a good resource to find the right commands to set defaults? Unfortunately, the otherwise excellent documentation is very incomplete in this regard.
The above isn't the only default setting I am struggling with.
For example, the following doesn't do anything (even though Chart.defaults.global.hover.animationDuration = 50; works):
Chart.defaults.global.hover.mode = 'index';
Chart.defaults.global.hover.intersect = true;
The correct syntax for globally changing the bar categoryPercentage is the following:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
And here's a working sample:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
scales: {
yAxes:[{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data:data,
options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
To find out about other valid options contained in Chart.defaults, simply log it to the console (console.log(Chart.defaults)) and search for the option name.
You don't need to set it globally, I actually recommend you to set it for each chart according to documentation.
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
datasets: {
bar: {
categoryPercentage: 0.95
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Related
I'm trying to display two charts in one page. I'm expecting like 1 doughnut and 1 pie.
Here's my view snippets:
First Chart
<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
<!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
<canvas id="pengeluaran" width="350"></canvas>
</div>
Second Chart
<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
<!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
<canvas id="sponsorship" width="350"></canvas>
</div>
I tried the solution at Two charts in a page not working, using Chart.js 3.1.1 cdn in Laravel 8.x framework & Multiple charts in one page - Chartjs, but it's seems doesn't work for me. I tried to implement it, but only the first chart is displaying on the page.
It's displays the error "Failed to create chart: can't acquire context from the given item", I double check everything and I can't find what's cause of the error.
Here's the javascript file:
<script>
const ctx1 = document.getElementById('pengeluaran');
const ExpensesLabel = ['Rewards', 'Bantuan', 'Others'];
const ExpensesData = {
labels :ExpensesLabel,
datasets: [{
label: 'Sebaran Pengeluaran untuk Anak',
data: [300, 50, 100],
backgroundColor: [
"rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
"rgb(255, 206, 86, 0.2)",
],
borderColor: [
"rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
"rgb(255, 206, 86, 1)",
],
hoverOffset: 4,
borderWidth: 1,
}]};
const options1 = {
responsive: true,
maintainAspectRatio: true,
layout: {
padding: 10
}
};
new Chart(ctx1, {
type: 'doughnut',
data: ExpensesData,
options: options1
});
</script>
Second Charts
<script>
const ctx2 = document.getElementById('sponsorship');
const SponsorLabel = ['TK','SD','SMP','SMA-K / Kuliah'];
const SponsorData = {
labels : SponsorLabel,
datasets: [{
label: 'Sebaran Penerimaan Hadiah Sponsor',
data: [300, 50, 100, 90],
backgroundColor: [
"rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
"rgb(255, 206, 86, 0.2)", "rgb(75, 192, 192, 0.2)",
],
borderColor: [
"rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
"rgb(255, 206, 86, 1)", "rgb(75, 192, 192, 1)",
],
hoverOffset: 4,
borderWidth: 1
}]
};
const options2 = {
responsive: true,
maintainAspectRatio: true,
layout: {
padding: 10
}
};
new Chart(ctx2, {
type: 'pie',
data: SponsorData,
options: options2,
});
</script>
Is there anything I missed? Any help would be appreciated! Thanks
Sorry for late reply. The fix was it was conflicting id naming with other div in the blade file. So I had to rename the second chart canvas id to different name. The code above works perfectly though, as explained and tested by FiddlingAway in the comment section.
<canvas id="sponsorship-charts" width="350"></canvas>
I want to make the bar with the maximum value take up the entire height of the chart field. How can I do it?
For example, as if in the picture the height of the chart field was up to the green line
You need to define the option yAxes.ticks.max, its value should correspond to highest value of the data array.
In case the data array is defined outside of the chart configuration, you could use the Math.max() function as follows:
yAxes: [{
ticks: {
max: Math.max(...data)
}
}]
Please take a look at below sample and see how it works (code is derived from the Chart.js Bar documentation page).
const data = [65, 59, 80, 81, 56, 55, 40];
new Chart('myChart', {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: data,
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: Math.max(...data),
maxTicksLimit: 3
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Good day! I have a problem. I need to connect a library to the project Chart.js. I used GitHub repository to connect, however there is no output on the resulting page.
Since I need to connect the library to the project first, I created a test directory for connecting it.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<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)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
</script>
<script src="js/Chart.js"></script>
<script src="js/Chart.min.js"></script>
</body>
</html>
I try to create a website with a bar-chart on it. I like to use ChartJs.
There are some good examples, but I don't know how to visualise the data if the data is an array.
var myArray = [{
year: '2016',
value: 5
},
{
year: '2017',
value: 9
},
{
year: '2018',
value: 4
}
];
How do I loop throu myArray to create a bar chart like this one in the example?
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['2016', '2017', '2018'],
datasets: [{
label: '# of Votes',
data: [5, 9, 4],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Thanks for your help!
Best, Marius
You can map your array of objects, getting only the value you need.
I did it by var values = myArray.map((x) => x.value) and then using values as the value to the data property inside chart options.
For the labels, you can use the same logic, but with x.year.
Below code represents an example:
var myArray = [{
year: '2016',
value: 5
},
{
year: '2017',
value: 9
},
{
year: '2018',
value: 4
}
];
//FILTER THE VALUES
var values = myArray.map((x) => x.value)
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['2016', '2017', '2018'],
datasets: [{
label: '# of Votes',
data: values,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="300" height="150"></canvas>
If, for some reason (browser maybe), you cant use arrow functions, then go with:
var values = myArray.map(function(x) {return x.value})
I have a pie chart made with chart.js and currently i'm wondering if its possible to only have a border for the outside of the circle / arc like so:
I tried the following configurations but it applies border the to the whole segment.
options: {
elements: {
arc: {
borderWidth: 0
}
}
}
and also:
data: {
datasets: [{
data: [male_data , female_data],
backgroundColor: pieColors1,
borderWidth: [10, 0, 0, 0, 0]
}]
},
but this is what im getting:
I guess you have to create your own color image (Solid color with white strip on top) and pass it in as a canvas image.
Below is a modified example I've made based on the sample given from the chart.js documentation and a random picture found on the net.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>