Develop Reference

How to put y axis of line chart to right when combined with bar chart in chart.js?

I have a graph where I am trying to draw a pareto chart by using chart.js. I am combining bar chart and line chart to achieve this. Here is my sample graph:
Here is the code:
this.chartData = {
labels: labels,
datasets: [
{
data: lineData,
label: "Cumulative Total of Number of Reassignments",
type: 'line',
fill: false,
datalabels: {
color: "#0f0f0f"
},
},
{
label: "Number of Reassignments",
data: datasetsLabel,
datalabels: {
color: "#0f0f0f"
}
},
]
}
lineData array holds the values 45.87, 64.22, etc.
datasetsLabel array holds the values 250, 100, 90, etc.
I tried to use the following options:
this.options = {
responsive: true,
scales: {
yAxes: [
{
ticks: {
stepSize: 5,
},
},
{
display: true,
position: 'right',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}
],
},
}
What I want to achieve is put 45.87, 62.22, etc values to the right side of the graph. How can I achieve this?

Why is Chart js first bar too small or not showing at all?

Hi I am trying to show some bar charts using charts js, my problem is that the first column isn't showing properly.
This is my code:
var options = {
scales: {
yAxes: [{
display: true
}],
xAxes: [{
display: false
}]
},
legend: {
display: false
}
};
var dataD = {
labels: ["2020-09-01 18:05:33", "2020-10-13 11:08:28"],
datasets: [{
label: "PA",
data: [132, 139],
backgroundColor: "#4cb6cb"
}]
};
var methods = new Chart($("#line192"), {
type: "bar",
data: dataD,
animation: true,
options: options
});
And this is the jsfiddle example
Any thoughts? thank you!

By default, the axes start at your minimum value. Set ticks.beginAtZero to true on your Y-axis to display and your first bar will be visible:
var options = {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}]
},
legend: {
display: false
}
};
var dataD = {
labels: ["2020-09-01 18:05:33", "2020-10-13 11:08:28"],
datasets: [{
label: "PA",
data: [132, 139],
backgroundColor: "#4cb6cb"
}]
};
var methods = new Chart($("#line192"), {
type: "bar",
data: dataD,
animation: true,
options: options
});
Here is the fixed jsfiddle

How to set the number of of rows in a line chart in chart.js?

Given a label of dates from the pass 9 days and a data set of numbers(2.5,1.5 etc), I want the the numbers/labels at the y-axis to be whole numbers from 1-5 while maintaining the points. What I'm trying to say is I want to have a fixed number of rows in the grid and I'm clueless on how to do it. Can anyone help me?
Current Graph:
Expected Graph:

Option 1/2: stacked
The shortest way:
yAxes: [{
stacked: true,
}]
https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.6,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
Option 2/2: step-size
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size
More control ==> set step size (To 1 in your example):
yAxes: [{
stacked: true,
ticks: {
stepSize: 1
}
}]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: false,
ticks: {
stepSize: 1
}
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

How do you revert xAxes with Chart.js?

For some reason the xAxes of my chart goes from most recent data to oldest date. I obviously want it the other way around / the normal way. How do I revert the xAxes? .. or just the xAxes to act normally with dates.
My chart is here: https://www.betscout.com/tips (Click the Stats tab)
I've already tried this option: https://jsfiddle.net/marineboudeau/4awme3fp/3 - but it doesn't work, not even in the provided example (nothing change when I replace reverse: true with reverse: false.)
I can easily reverse the yAxes this way, so why not xAxes?
Here's some of my JS code:
let chart = document.getElementById('chart');
let myLineChart = new Chart(chart, {
type: 'line',
data: {
labels: grades,
datasets: [{
data: numbers,
label: 'Total profit',
fill: false,
borderColor: '#3771a3'
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
display: true,
reverse: true,
fontSize: 12
}
}]
}
}
});
}

I think it is still being discussed as to why it isn't working, you could do numbers.reverse() and grades.reverse() until it it fixed. fiddle

Chart.js v2 - combined stacked bar chart and 2 unstacked lines

Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});

Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.

Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />