Develop Reference

chart.js how to make x-axis labels position top

I'm new to chart.js, and I have a question about making x-axis labels position to the top.
This is the result that I expected: x-axis labels are on the top.
And this is my attempt:
const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
plugins: {
legend: {
display: false,
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>
If it is possible, would you take your time to write the answer?
Thanks in advance, and if my question is insufficient, I would appreciate it if you could tell me.

You can configure all scale related things like position in this namepsaces: options.scales[scaleId]. For more config options of the scales you can read the documentation: https://www.chartjs.org/docs/master/axes/
const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
scales: {
x: {
position: 'top'
}
},
plugins: {
legend: {
display: false,
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>

inside options > scales > xAxes the xAxes is an array, so we can define multiple axis and there configuration like this:
options:{
scales: {
xAxes: [
{
position: 'top',
ticks: {
maxRotation: 90,
minRotation: 80
}
}
]
}
}
Checkout the example here
https://codepen.io/ganeshbkdm/pen/oNeaOwm

Horizontal spacing in ChartJS Bar Graph

I am using Chart.js plugin.
I want to reduce the horizontal spacing.
Image 1 : I try
Image 2 : I want
JSFiddle Link Here!
HTML Code Here
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="800" height="300"></canvas>
CSS Code Here
canvas {
margin:0 auto;
}
JS Code Here
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['April', 'May'],
datasets: [{
label: 'facebook',
borderColor: 'rgba(0,0,0,0)',
backgroundColor: '#3b5998',
data: [179, 201]
}, {
label: 'instagram',
borderColor: 'rgba(255,255,255,0)',
backgroundColor: '#e8361c',
data: [31, 47]
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0
},
gridLines: {
display:false
}
}],
xAxes: [{
display:true,
barPercentage: 0.7,
categoryPercentage: 0.3,
gridLines: {
display:false
}
}]
},
legend: {
position:'bottom'
},
animation:false
}
});
I want to reduce the interval between categories. I do not know if there is a corresponding option. Please help me.

Chart.js bar chart : Grid color and hide label

I'm trying to change to background color of my grid in chart.js, I've tried following the documentation and I've done a lot of research but I can't seem to figure it out. I also want to get rid of the top label, can't find an easy way to do that either. The label I'm talking about is the label that says "My first dataset" on the demo here: http://www.chartjs.org/docs/#bar-chart
Solution:
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
datasets: [{
label: "",
data: [12, 19, 3, 5, 2, 3, 4],
backgroundColor: "rgba(3, 118, 195, 0.5)",
borderColor: "rgba(0, 158, 219, 1)",
borderWidth: "2",
}]
},
options: {
legend:{
display: false
},
scales: {
xAxes: [{
gridLines: {
show: true,
color: "F3F3F3",
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
</script>
Thanks!

To hide lable i.e nothing but legend:
Use below config in options:
legend:{
display:false
}
Thus in your code:
options: {
legend:{
display:false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
And, for background color use css for canvas element:
<canvas id="myChart" style="background-color: grey;">
Hope this will do for you!

Display values in Pareto chart using Chart.js 2.0.2

I have a Pareto chart (using Chart.js Version: 2.0.2) and i need to display values inside of the bars and under the line.
Any help will be very appreciated:
This is the code (hope that it is useful for somebody):
<canvas id="canvas"></canvas>
<script type="text/javascript">
var data = {
labels: ["8","7","9","11","10"],
datasets: [{
type: "line",
label: "Acumulado",
borderColor: "#BA1E14",
backgroundColor: "#BA1E14",
pointBorderWidth: 5,
fill: false,
data: [34.04,57.45,76.60,89.36,100.00],
yAxisID: 'y-axis-2'
},{
type: "bar",
label: "Asistencia",
borderColor: "#56B513",
backgroundColor: "#56B513",
data: [16,11,9,6,5],
yAxisID: 'y-axis-1'
},{
type: "bar",
label: "Solución",
borderColor: "#000FAA",
backgroundColor: "#000FAA",
data: [16,11,9,6,5],
yAxisID: 'y-axis-1'
}]
};
var options = {
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Estaciones"
}
}],
yAxes: [{
type: "linear",
position: "left",
id: "y-axis-1",
stacked: true,
ticks: {
suggestedMin: 0
},
scaleLabel: {
display: true,
labelString: "Minutos"
}
},{
type: "linear",
position: "right",
id: "y-axis-2",
ticks: {
suggestedMin: 0,
callback: function(value) {
return value + "%";
}
},
scaleLabel: {
display: true,
labelString: "Porcentaje"
}
}]
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
};
</script>
Right now the chart looks like this:
And i need it to look like this:

This is the answer i developed (only in the options object):
var options = {
animation: {
onComplete: function() {
var ctx = this.chart.ctx;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
this.chart.config.data.datasets.forEach(function(dataset) {
ctx.font = "20px Arial";
switch (dataset.type) {
case "line":
ctx.fillStyle = "Black";
dataset.metaData.forEach(function(p) {
ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 20);
});
break;
case "bar":
ctx.fillStyle = "White";
dataset.metaData.forEach(function(p) {
ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y + 20);
});
break;
}
});
}
}
...
};
And this is the result:

I think since version 2.6.0 it's possible to Mix ChartTypes, like Bars and Lines
follow the instructions
A short example is 2 DataSet, one is bar type and other line type:
const data = {
labels: [
'January',
'February',
'March',
'April'
],
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
You just have to calculate the Pareto values and put on the Dataset Line Type

Can I set different fill color based on a given threshold in Chart.js?

Is it possible to have different fill colors for values above or below a given threshold in Chart.js (Chart.js)?
I can't find any option to do this in Chart.js, has anyone done something like this before? I prefer to use Chart.js over Highcharts.
Like this: Highcharts example
html
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
js
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: '$'
}
},
title: {
text: 'Win/Loss'
},
series: [{
name: 'Avg. ($)',
data: [546, 342, -234, -540, 103, -345],
threshold: -1,
negativeFillColor: 'rgba(255,0,0,0.5)',
fillColor: 'rgba(0,204,0,0.5)',
lineColor: 'rgba(0,0,0,1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(0,0,0,1)',
lineWidth: 1
}
},{
name: 'User ($)',
data: [-640, -665, -700, -640, -630, -623],
fillOpacity: 0,
lineColor: 'rgba(20, 94, 204, 1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(20, 94, 204, 1)',
lineWidth: 1
}
}]
});
});

I did a similar thing using gradientStroke command, then applying this to the backgroundColor:
var ctx = document.getElementById("YearsExperience").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");
var YearsExperience = new Chart(ctx, {
type: 'bar',
data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] },
options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } }
});
An example of the output can be seen here: http://neophytte.mine.nu/portfolio/skills.html