I have bar/line chart on my page and there is two lines and four bar values.
The first line is average value, that is one straight line, so it is array that filled with same number. Second line has different values that are not related to first line number. The think is that the first line raises the second line?? When I click to enable the average line, then the second line goes to right place. Is this a bug or did I do something wrong?
Here is is the code:
var ctx_bar = document.getElementById("points").getContext('2d');
var average = Array.apply(null, Array(points_order[0].length)).map(Number.prototype.valueOf,glob_pisteet[4][3]);
trows_chart = new Chart(ctx_bar, {
type: 'bar',
data: {
labels: points_order[4],
datasets: [{
type: 'line',
label: 'average',
borderColor: 'rgb(50, 50, 0)',
borderWidth: 1,
fill: false,
radius: 0,
data: average
},{
type: 'line',
label: 'points/trow',
borderColor: 'rgb(255, 51, 51)',
borderWidth: 4,
fill: false,
data: points_order[5]
},{
type: 'bar',
label: 'first',
backgroundColor: 'rgb(0, 92, 230)',
stack: 'round 1',
data: points_order[0]
}, {
type: 'bar',
label: 'second',
backgroundColor: 'rgb(102, 163, 255)',
stack: 'round 1',
data: points_order[1]
}, {
type: 'bar',
label: 'third',
backgroundColor: 'rgb(230, 138, 0)',
stack: 'round 2',
data: points_order[2]
}, {
type: 'bar',
label: 'fourth',
backgroundColor: 'rgb(255, 194, 102)',
stack: 'round 2',
data: points_order[3]
}]
},
options: {
title:{
display:true,
text:"Drows"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
Well I found the reason:
If you have your options setting like this:
title:{
display:true,
text:"Heitot"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Then it will do that. As soon as you take this part:
yAxes: [{
stacked: true
}]
away or change stacked: true to false, then it acts like normal.
Related
I am using Chart.js (http://www.chartjs.org/docs/) for charting.
My type Chart is Bar.
Label of X axis have 4 lines.
I Change color of X axis values. color of values is one color.
But I want one line per color and color same like the bar color.
var barChartData = {
labels: [["Injection", 10, 20], // here I want to change the color
["Electronics", 5, 15],
["TOTAL", 15, 35]
],
datasets: [{
label: "2018",
backgroundColor: window.chartColors.orange,
yAxisID: 'A',
data: [10, 5, 15]
}, {
label: "2017",
backgroundColor: window.chartColors.green,
yAxisID: 'A',
data: [20, 15, 35]
}]
};
var canvas = document.getElementById('canvas').getContext('2d');
new Chart(canvas, {
type: 'bar',
data: barChartData,
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}],
xAxes: [{
ticks: {
fontColor: "#222", // This here that I changed.
},
}]
}
}
})
I want to change color of labels are 10, 5, 15 is orange and 20, 15, 35 is green and Injection, Electronics, TOTAL is black
Can I do that? How?
var myData = [
["id1","test 11111","AA",1.95],
["id2","test 2","BB",1.94],
["id3","test 3","CC",1.93],
["id4","test 4","DD",1.93],
["id5","test 5","EE",1.91],
["id6","test 6","FF",1.90],
["id7","test 7","GG",1.82],
["id8","test 8","HH",1.85],
["id9","test 9","II",1.83],
["id10","test 10","JJ",1.79]
];
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
xAxisID:'modelAxis',
data: myData.map((entry)=>entry[3])
}]
},
options:{
scales:{
xAxes:[
{
id:'modelAxis',
type:"category",
ticks:{
//maxRotation:0,
autoSkip: false,
callback:function(label, x2, x3, x4){
return label;
}
},
labels:myData.map((entry=>entry[1]))
},
{
id:'groupAxis',
type:"category",
gridLines: {
display: false,
drawBorder: false,
drawOnChartArea: false,
offsetGridLines: false
},
ticks:{
padding:0,
maxRotation:0,
fontSize: 10,
fontColor: '#FF9090',
autoSkip: false,
callback:function(label){
return label;
}
},
offset: true,
labels:myData.map((entry=>entry[1]))
},{
id:'groupAxis2',
type:"category",
gridLines: {
display: false,
drawBorder: false,
drawOnChartArea: false,
offsetGridLines: false
},
scaleLabel:{
padding: 10,
},
ticks:{
padding:0,
fontSize: 10,
fontColor: '#AB64F4',
maxRotation:0,
autoSkip: false,
callback:function(label){
return label;
}
},
offset: true,
labels:myData.map((entry=>entry[1]))
}
],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
I've been having problems trying to generate a combo bar/line chart using chart.js 2.7.2.
Currently I can render the chart, however the bars are not visible, as shown in the attached picture.
Combo Chart with problem
Please note that in the above picture, "Data1" corresponds to the line chart to be plotted on the left Y axis, and "Data2" corresponds to the bar chart to be plotted on the right Y axis.
Also note that the tooltip does show the "Data2" series, however it's not visible on the chart!
Below the javascript code used to generate the chart. It uses a canvas within a simple html document.
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
type: 'bar',
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
Any help on this would be greatly appreciated.
need to define the overall chart type, at the top level,
then you change one of the types at the dataset level
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type - top level
data: {
labels: x_time,
datasets: [{
type:'line', // <-- define dataset type
...
see following working snippet...
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
I created a simple line chart using chart.js with 3 Y axes:
https://codepen.io/anon/pen/dZVgKw
As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here?
This is how I add an axe:
{
id: 'C',
type: 'linear',
position: 'left',
ticks: {
max: 10,
min: 20,
},
}
Thanks.
How can I set step size here?
Straight from the samples (Linear Scale, step size):
By setting a stepSize value.
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 5 // <----- This prop sets the stepSize
}
}]
}
Here's a live example:
var ctx = document.getElementById('chartJSContainer').getContext('2d')
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
stepSize: 3
},
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
this.data = {
labels: Xaxis,
datasets: [
{
label: "Primary",
data:Primyaxis,
type: 'line',
borderColor:'#eddb1c',
backgroundColor:'#FFF3D6',
fill: false,
pointBorderColor: 'yellow',
pointBackgroundColor: 'yellow',
borderWidth: 1.5
},
{
label: "Secondary",
data: Secyaxis,
type: 'line',
borderColor:'#FF7A96',
backgroundColor:'#EAC3CC',
fill: false,
pointBorderColor: 'red',
pointBackgroundColor: 'red'
}
]
};
this.options = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Extra Distance Interval From Origin'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Percentage of Employees'
},
ticks: {
// min: 50,
max: 100,
// forces step size to be 5 units
stepSize: 2 // <----- This prop sets the stepSize
}
}]
},
pan: {
enabled: true,
},
zoom: {
enabled: true,
},
responsive: true,
}}
In Charts.js I am trying to mix non-numeric and numeric series in one chart. I am not sure, if it is even possible, I did not found any clear statement in the documentation. Here is my configuration that should IMO work. ( see https://jsfiddle.net/carnecro/13tfh0gb/ )
var config = {
type: 'line',
data: {
xLabels: ["00","02","04","06","08","10","12","14","16","18","20","22"],
yLabels: ['ERR', 'STARTING', 'ON', 'STOPPING', 'OFF'],
datasets: [{
label: "Motor Status",
xAxisId: "X",
yAxisId: "Y1",
fill: false,
borderColor: '#337ab7',
backgroundColor: '#337ab7',
steppedLine: true,
data: ['OFF', 'OFF', 'STARTING', 'ON', 'ON', 'STOPPING', 'OFF']
},{
label: "Temperature",
xAxisId: "X",
yAxisId: "Y2",
fill: false,
borderColor: '#22dd88',
backgroundColor: '#22dd88',
steppedLine: true,
data: [15,15,18,47,43,27,15]
}]
},
options: {
responsive: true,
tooltips: false,
scales: {
xAxes: [{
id: "X",
display: true
}],
yAxes: [{
id: "Y1",
type: 'category',
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: 'Status'
},
ticks: {
reverse: false
}
},{
id: "Y2",
min: 0,
max: 150,
type: 'linear',
beginAtZero: true,
position: 'right',
display: true,
scaleLabel: {
display: true,
labelString: 'Temp'
},
ticks: {
reverse: false
}
}]
}
}
});
This is my chart:
I'm reading the documentation looking for some explanation of how to set an' minimum axe for my chart. I wanted to start at 0, instead of 2000.
How can I do that?
This is my code:
var dataBar = {
labels: [dataChart[0]['mesReferencia'],dataChart[1]['mesReferencia'],dataChart[2]['mesReferencia']],
datasets: [{
label: "CPF's Enviados",
backgroundColor: "rgba(0,51,90,0.8)",
borderColor: "rgba(0,51,90,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,51,90,0.9)",
hoverBorderColor: "rgba(0,51,90,1)",
data: [dataChart[0]['cpfsEnviados'],dataChart[1]['cpfsEnviados'],dataChart[2]['cpfsEnviados']]
},
{
label: "Propostas Finalizadas",
backgroundColor: "rgba(0,130,229,0.8)",
borderColor: "rgba(0,130,229,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,130,229,0.9)",
hoverBorderColor: "rgba(0,130,229,1)",
data: [dataChart[0]['propostasFinalizadas'],dataChart[1]['propostasFinalizadas'],dataChart[2]['propostasFinalizadas']]
},
{
label: "Propostas Aprovadas",
backgroundColor: "rgba(43,139,74,0.8)",
borderColor: "rgba(43,139,74,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(43,139,74,0.9)",
hoverBorderColor: "rgba(43,139,74,1)",
data: [dataChart[0]['propostasAprovadas'],dataChart[1]['propostasAprovadas'],dataChart[2]['propostasAprovadas']]
}]
};
Thanks!
Set beginAtZero: true for ticks in your options. Here is an example:
var options = {
type: 'bar',
responsive: true,
legend: false,
animation: false,
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
}],
yAxes: [{
display: true,
gridLines: {
display: false
},
ticks: {
beginAtZero:true
}
}]
}
};