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?
Related
I'm using chart.js to build my charts, but felt the need to create a stacked chart inline, but using the stacked:true property doesn't seem to work
Here is my code
var chart1 = new Chart(document.getElementById("invests2").getContext("2d"), {
type: "line",
options: {
layout: {
padding: 0
},
elements: {
point:{
radius: 0
},
},
responsive: true,
bezierCurve: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked:true,
display: true,
scaleLabel: {
display: true,
},
ticks: {
maxTicksLimit:100,
fontSize:12,
maxRotation: 0,
minRotation: 0
},
gridLines: {
display: false,
}
}]
}
},
data: {
labels: ['01/04/2018','01/05/2018','01/06/2018','01/07/2018','01/08/2018','01/09/2018'],
datasets: [{
type: 'line',
label: 'Tit. Publicos',
data: [20940429854.44,19639459015.81,19191914837.46,19290826114.34,19702912802,21274400792.07]
},
{
type: 'line',
label: 'Tit. Privados',
data: [315734585.11,332328878.86,349823178.63,343130519.19,342839692.62,367877901.82,]
}
]
},
});
The look presented was this
But i need this
Stacked:true not work for line chart?
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
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>
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,
}
}
});
When the label is long, the y-axis is pushed to the left. It left a gap between the y-axis and the bar chart. Is there anyway to close the gap?
var labelList = ["Professional & Disciplinary Knowledge","Curriculum Planning and Instructional Delivery","Learning Environment","Creative Thinking","Problem solving and Critical Thinking","Research Skills"];
var barDatasource = {
labels: labelList,
datasets: [
]
};
var barConfig = {
type: 'bar',
data: barDatasource,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 4
}
}],
xAxes: []
},
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Radar Chart for WM Component Mean',
fontSize: 14,
fontStyle: 'bold'
}
}
};