Stuck on a chart.js item as the docs don't seem to be particularly clear.
Simply trying to remove a gridline from the chart. I tried both the old syntax that was referenced here in Stack overflow:
options: {
scales: {
xAxes: [{
gridLines: {
display: false,
}
}]
}
}
And the new syntax:
options: {
scales: {
y: {
grid: {
drawBorder: false
}
}
}
}
Neither work...
Here's my Snippet:
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, 10, 5, 8, 11]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
y: {
grid: {
drawBorder: false
}
},
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>
The property you are looking for is called display instead of drawBorder, also your xAxes are defined in the wrong way, you were using v2 syntax instead of v3
Example:
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, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
display: false,
}
},
y: {
grid: {
display: false
}
},
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>
Here is the solution.
Looks like lot of configuration has changed in the new version.
Reference from documentation here.
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, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
drawOnChartArea:false
}
},
y: {
grid: {
drawOnChartArea:false
}
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>
I had the same problem and I solved it by setting the color of the gridlines to white like so:
scales: {
xAxes: [{
gridLines: {
color: '#ffffff'
}
}]
}
Related
I want to add datalabels to the top of each bar and color them in black and make it in bigger font. Like this:
my chart with necessary labels
But all that I tried don't change the chart.
I add chartjs and charts-plugin-datalabels:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
Chart creating function:
function bars_chart(data, period) {
Chart.register(ChartDataLabels)
document.querySelector('#chartContainer').innerHTML = '<canvas id="bar-chart-horizontal"></canvas>'
var chartConfig = {
type: 'bar',
data: {
labels: period,
datasets: data
},
options: {
responsive: true,
plugins: {
dataLabels: {
font: {
color: "#000000",
size: 25
},
color: "#000000"
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
},
}
},
};
new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
}
It looks like there is a simple solution but I can't find it)
Your namespace is wrong, you putted a capital L in there while it needs to be fully lower case. After that you can set anchor and align to 'end' to get the value on top of the bars:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
}]
},
options: {
plugins: {
datalabels: {
color: 'black',
font: {
size: 40
},
anchor: 'end',
align: 'end'
}
}
}
}
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.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>
I've got the following function making doughnut charts in ChartJS, the function imports the data, label text, and the id of the element. For some reason the options legend labels does not work for me. The default color of '#666' is not usable for my site's layout either.
my function:
function newDoughnutChart(id, labels, data) {
var donutChartCanvas = $(id).get(0).getContext('2d')
var donutData = {
labels: labels,
datasets: [
{
data: data,
backgroundColor: backgroundColor,
}
]
}
var donutOptions = {
maintainAspectRatio: false,
responsive: true,
options: {
legend: {
labels: {
usePointStyle: true,
fontColor: "#fff",
}
}
}
}
new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
}
backgroundColor is a variable I've set globally for this js file.
The legend config has been moved to the plugins section
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
color: 'red'
}
}
}
}
}
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.3.2/chart.js"></script>
</body>
var donutOptions = {
maintainAspectRatio: false,
responsive: true,
options: {
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
}
}
}
}
}
You can change the color by grabbing the class of that div tag using CSS selector. But It's not the best idea because it will change the color in your whole app.
I'm new with chart.js and have tried to manage "option: in the javascript, but is seems that xAxes: option is totally neglected.
I have also tried other examples like grid colors etc, but the "options:" still does not work.
Could you please have a check on this simple code what goes wrong? I use Edge.
Best regards,
Cornelis
See here the code:
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
borderColor: "#3e95cd",
fill: false,
tension: 0.1,
label: 'Name of label'}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}//Scales
}//Option
});
<!DOCTYPE html>
<html lang="en">
<body>
<div class="chart-container" style="position: relative; height:30vh; width:50vw">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="70" height="20"></canvas>
</div>
</body>
</html>
You are using v3 of the lib while your options object syntax is in v2, please read the migration guide to check if you need to change anything else, for this issue all the scales are now a seperate object instead as listed as x and y axes in an array, also the prop name has changed.
Example:
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'
}]
},
options: {
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: 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.5.0/chart.js"></script>
</body>
I've got the following function making doughnut charts in ChartJS, the function imports the data, label text, and the id of the element. For some reason the options legend labels does not work for me. The default color of '#666' is not usable for my site's layout either.
my function:
function newDoughnutChart(id, labels, data) {
var donutChartCanvas = $(id).get(0).getContext('2d')
var donutData = {
labels: labels,
datasets: [
{
data: data,
backgroundColor: backgroundColor,
}
]
}
var donutOptions = {
maintainAspectRatio: false,
responsive: true,
options: {
legend: {
labels: {
usePointStyle: true,
fontColor: "#fff",
}
}
}
}
new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
}
backgroundColor is a variable I've set globally for this js file.
The legend config has been moved to the plugins section
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
color: 'red'
}
}
}
}
}
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.3.2/chart.js"></script>
</body>
var donutOptions = {
maintainAspectRatio: false,
responsive: true,
options: {
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
}
}
}
}
}
You can change the color by grabbing the class of that div tag using CSS selector. But It's not the best idea because it will change the color in your whole app.
i want to set units in my pie chart-pie.js. in this data sets i want to add a unit "'Rp'+data" in my pie-chart.js
enter image description here
here is my code
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Makassar", "Sinjae", "Bulukumba", "Gowa"],
datasets: [{
data: [Rp. 4000, Rp. 3000, Rp. 2000, Rp. 5000],
backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
}],
},
});
do you guys have any idea ? any help will be appreciated
Update #1
Hi I already tried your code before, i realized i used v2.8.0, when i used your code and change it into "Tooltips" and it run just like in the picture
enter image description here
Here is my Updated code
var ctx = document.getElementById("myPieChart").getContext('2d');
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Makassar", "Sinjae", "Bulukumba", "Gowa"],
datasets: [{
label: '# of Votes',
data:[4000, 3000, 2000, 5000],
backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
}],
},
options:{
tooltips:{
callbacks:{
label: (ttItem) => (`${ttItem.label}: Rp. ${ttItem.parsed}`)
}
}
}
});
You will have to use a custom tooltip callback like this:
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.label}: Rp. ${ttItem.parsed}`)
}
}
}
}
Documentation: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
V2:
options: {
tooltips: {
callbacks: {
label: (ttItem, items) => (`${items.labels[ttItem.index]}: R. ${items.datasets[ttItem.datasetIndex].data[ttItem.index]}`)
}
}
}
Example V3:
var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.label}: Rp. ${ttItem.parsed}`)
}
}
}
}
}
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.2.0/chart.js"></script>
</body>
Example V2:
var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: (ttItem, items) => (`${items.labels[ttItem.index]}: R. ${items.datasets[ttItem.datasetIndex].data[ttItem.index]}`)
}
}
}
}
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/2.8.0/Chart.js"></script>
</body>