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

chartjs, How to access x-axis, which is generated dynamically by pushing {x,y} in datasets.data[] in chartjs Scatter plot or Line plot repeatedly?

I am plotting a multi-axis scatter plot in which first datasets[0] I have plotted nominal data that is static then I am pushing in second datasets[1] dynamic generated dataPoint{x,y}.
How to access the dynamically generated x-axis after pushing dynamic dataPoint={x,y} in mychart.config.data.datasets[0].data.push(dataPoint), I want to set some scale property of x-axis that is dynamically generated when I pushed some data point, before any data point when datasets[0].data is empty there is no x-axis but when I pushed some data, chartjs dynamically generate x-axis and its range.
var myOptions = {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: false
}
},
{
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
scaleLabel: {
display: true,
labelString: 'x values',
fontSize: 10
},
ticks: {
max: myMax,
min: myMin,
beginAtZero: true,
}
}
]
}
}
var myDataset = {
type: 'scatter',
lineTension: 0,
fill: false,
data: myData,
};
var config = {
type: 'scatter',
data: {
datasets: myDataset,
},
options: myOptions
};
// this configuration is only for the static dataset means this xAxes config shall work only if all dataPoints will be pushed at once.
xAxes: [{
gridLines: {
offsetGridLines: false
}
},
{
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
scaleLabel: {
display: true,
labelString: 'x values',
fontSize: 10
},
ticks: {
max: myMax,
min: myMin,
beginAtZero: true,
}
}
]
But how to access another x-axis that is being generated by chartjs dynamically when pushing dataPoint one by one?
for(i=0;i<100;i++){
config.data.datasets[1].data.push({
x: myX,
y: myY
});
Chart.update();
}
Chart is being updated fine, but I can not access the X-Axis scale that is being dynamically generated by above for loop code.

Chart.js: Bar chart shows labels, not data

I want to draw a bar plot with chart.js using this code (very simple):
this.plotEnergy = new Chart($('#plotEnergy'),
{
type: 'bar',
animation: false,
data:
{
labels: ["aaa", "bbb"],
datasets: [ {
label: "ijoij",
backgroundColor: '#000000',
data: [2000, 2300]
},
{
label: "ijooijojij",
backgroundColor: '#FF00FF',
data: [1500, 2500]
},
]
},
options:
{
tooltips:
{
mode: 'index',
intersect: false
},
title:
{
display: true,
text: 'Generated energy'
},
responsive: true,
scales:
{
xAxes: [
{
stacked: 'false',
position: 'bottom',
}],
yAxes: [
{
stacked: false,
scaleLabel:
{
display: true,
labelString: 'Energy [kWh]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
But I get this: The labels are showed correctly, even the y-axis range is correct. But the bars don't show up. I can click on the legends items to make the corresponding data disappear and the y-axis range would adapt correctly.
Anyone has an idea?

How to show border around tooltip chart.js and show y-axis integer value along with text in tooltip title?

i am drawing a line chart using chart.js and showed a tooltip on graph.But i am not able to draw a border around tooltip and in title i want to show text and current y-axis value as title(eg.total count:2 but instead of 2 it showing undefined.Now i removed code from title callback). I am trying for many days but still no luck. Please help me. Here is my code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:["a","b","c"],
datasets: [{
label: 'Total count',
lineTension: 0,
data: [2,4,6],
fill: false,
borderColor: 'rgba(39,50,139,1)',
pointBackgroundColor:'rgba(176,179,214,1)',
pointBorderColor:'rgba(39,50,139,1)',
pointRadius:5,
pointHoverBackgroundColor:'rgba(39,50,139,1)',
borderWidth:2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false
},
chartArea: {
backgroundColor: '#fff'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
maxTicksLimit:3
}
}],
xAxes: [{
gridLines: {
display: false,
color: "black"
},
ticks: {
max:12,
maxTicksLimit:12
}
}]
},
tooltips: {
callbacks: {
title:function(tooltipItem, data) {
},
afterLabel: function(tooltipItem, data) {
return userNamesResult[tooltipItem.index];
}
},
titleSpacing:0,
titleMarginBottom:0,
titleFontColor:'#000',
backgroundColor: '#f2f3f4',
bodyFontColor: '#000',
//bodyFontStyle:'bold',
bodyFontSize: 14,
displayColors: false,
borderColor:'#ff0000',
borderWidth:5,
}
}
});