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?
Related
I'm making a chart which is drawing data from a database array. I have 2 arrays:
const numPostPerCat= <?php echo json_encode($countCateT); ?>;
const catName= <?php echo json_encode($cateTforChart); ?>;
Which I use to feed the chart in the traditional way:
const data2= {
labels: catName,
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: numPostPerCat,
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}],
};
const config2={
type: 'bar',
data: data2,
options: {
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid:{
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Territorios',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
But how can I use database arrays when I want to use data structure? Should I use a different kind of a array? There's another configuration in JS? because this doesn't work:
const data2= {
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: [
{Terris: catName, cuantos: {cantidad: numPostPerCat}
},
],
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}]
};
const config2={
type: 'bar',
data: data2,
options: {
parsing:{
xAxisKey: 'Terris',
yAxisKey: 'cuantos.cantidad',
},
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid: {
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Años',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
I have a question about chart.js. I created a line chart with two lines. One line for the high values and one line for the lower values.
Everything works fine, but the low red line won't appear in the diagram. Is there anything i have forgotten?
Thank you for your help!
var config = {
type: 'line',
data: {
labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
datasets: [{
label: 'High',
backgroundColor: 'blue',
borderColor: 'blue',
data: [10.43, 10.42, 10.44, 10.43, 10.40],
fill: false,
}, {
label: 'low',
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: [
[8.43, 8.5, 8.39, 8.38, 8.38],
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Test'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>
Your second dataset data array is double wrapped:
data: [
[8.43, 8.5, 8.39, 8.38, 8.38],
],
Removing the second set of brackets generates the graph correctly.
var config = {
type: 'line',
data: {
labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
datasets: [{
label: 'High',
backgroundColor: 'blue',
borderColor: 'blue',
data: [10.43, 10.42, 10.44, 10.43, 10.40],
fill: false,
}, {
label: 'low',
fill: true,
backgroundColor: 'red',
borderColor: 'red',
data: [8.43, 8.5, 8.39, 8.38, 8.38], // ****THIS IS WHERE THE UPDATE IS****
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Test'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>
I don't know how to remove space on left side which you can see on the image. I tried things like aspectRatio: 1 but doesn't work.
Here's the current config
const config = {
type: "line",
data: dataSets,
options: {
responsive: false,
maintainAspectRatio: false,
elements: {
point: { radius: 0 },
line: {
tension: 0,
},
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "day",
},
ticks: {
display: false,
},
gridLines: {
tickMarkLength: 1,
color: "#d8d8d8",
zeroLineColor: "#d8d8d8",
},
}],
yAxes: [{
ticks: {
display: false,
},
}],
},
legend: {
display: false,
},
},
};
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?
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,
}
}
});