I have to create stacked bar chart using react-chartjs-2.
options : {
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true
}]
}
}
The stacked in Bar doesn't seem to work.
I am using chartjs#2.4.0
const options = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
let data ={
datasets:[{
label: 'test1',
data :[1]
},
{
label: 'test2',
data: [2]
}],
labels:['label']
}
render(){
return <Bar data={data} options={options} />
}
Add the stack option to your datasets.
Identical stack values are stacked together.
const arbitraryStackKey = "stack1";
const data = {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [
// These two will be in the same stack.
{
stack: arbitraryStackKey,
label: 'data1',
data: [1, 2, 3, 4, 5]
},
{
stack: arbitraryStackKey,
label: 'data2',
data: [5, 4, 3, 2, 1]
}
]
}
Related
The chartjs line chart is showing like an area chart and with smooth lines. I want to make the chart a simple line chart with sharp points. I have tried some options but all in vain.
var AreaChart = new Chart(AreaCharts, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Required',
data: [],
backgroundColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
},
{
label: '2nd',
data: [],
backgroundColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
},
},
});
This is the code. I am filling up the data and the labels from other function.
The line should be sharp and there should be just the line not any area. I did read the documentation but it is confusing for me.
I have posted a solution here: http://jsfiddle.net/srux4971/
Most important parts are
data: {
...
datasets: [{
...
fill: false, //no fill
lineTension:0, //straight lines
In order to convert the area chart into a line chart, add the option fill: false to each dataset.
I you also define the option borderColor, the lines will appear with the desired color.
Please take a look at your amended code and see how it works.
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'Required',
data: [3, 2, 4, 5, 6, 4, 3],
backgroundColor: '#f39233',
borderColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
},
{
label: '2nd',
data: [4, 1, 3, 5, 3, 4, 2],
backgroundColor: '#b8de6f',
borderColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
I'm new to Chart.js and I'm having a little bit of trouble customizing the onHover() pop up. I want to add a percent symbol after the y axis data value on the pop up, so what would be displayed will look something like this, label: value%. I have tried using scaleLabel and ticks with now luck.
Right now this is how it looks:
and here is my code:
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Casos confirmados',
backgroundColor: 'rgb(224, 224, 224)',
borderColor: 'rgb(0, 0, 0)',
data: confirmedCases
}
]
},
options: {
scales: {
yAxes: [{
gridLines: {
drawTicks: true,
},
ticks: {
display : true,
// Include a percent sign in the ticks
callback: function(value, index, values) {
return value + '%';
}
},
scaleLabel: {
display: true,
labelString: '%'
}
}]
}
}
});
If anyone could give me any pointers I would greatly appreciate it.
You can define tooltips.callbacks.label function inside the chart options as follows:
tooltips: {
callbacks: {
label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
}
},
Please take a look at your amended code and see how it works.
let chart = new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', ],
datasets: [{
label: 'Casos confirmados',
backgroundColor: 'rgb(224, 224, 224)',
borderColor: 'rgb(0, 0, 0)',
data: [5, 6, 4, 3, 6]
}]
},
options: {
tooltips: {
callbacks: {
label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: value => value + '%'
},
scaleLabel: {
display: true,
labelString: '%'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I want to make horizontal bar chart using chartjs in react like this: chart i want to make
but i end up doing like this chart i make
can someon help me please, im new in react and chartjs
Here's the continuation of this post: How to make labels on both side from horizontal bar chart js
here's what i code:
this the data:
export const dataPasienKeluarMasuk = {
type: 'bar',
labels: [
[0, 1, 2, 3,4], // expect output 0 - 4
[5, 6, 7, 8, 9], // expect output 5 - 9
[10, 14], // ext..
[15, 19],
[20, 24],
[25, 29],
[30, 34],
],
datasets: [
{
label: 'Pasien Masuk',
xAxisID: 'A',
data: [100, 90, 80, 70, 60],
backgroundColor: 'red',
},
{
label: 'Pasien Keluar',
xAxisID: 'A',
data: [-100, -90, -80, -70, -60],
backgroundColor: 'blue',
},
],
}
here's the chart:
import { HorizontalBar } from 'react-chartjs-2'
import { dataPasienKeluarMasuk } from ...blabla
<HorizontalBar
data={dataPasienKeluarMasuk}
height={227}
options={{
responsive: true,
title: {
display: true,
text: 'Data Pasien Keluar Masuk',
fontSize: 20,
},
legend: {
display: true,
position: 'bottom',
},
scales: {
xAxes: [
{
id: 'A',
position: 'left',
},
],
},
}}
/>
You should define both axes as stacked:
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
In order to see only positive values displayed on the x-axis ticks, you need to define a ticks.callback function on the x-axis.
ticks: {
callback: value => Math.abs(value)
}
To have only positive values displayed in the tooltips, you further need to define a tooltips.callback.label functions as shown below.
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
let ds = data.datasets[tooltipItem.datasetIndex];
return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
}
}
},
Please take a look at the runnable code snippet below and see how it works (this is a pure Chart.js solution but it should easily be adaptable to react-chart.js).
new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [{
label: 'Pasien Masuk',
data: [100, 90, 80, 70, 60],
backgroundColor: 'red',
},
{
label: 'Pasien Keluar',
data: [-100, -90, -80, -70, -60],
backgroundColor: 'blue',
},
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Data Pasien Keluar Masuk',
fontSize: 20,
},
legend: {
position: 'bottom',
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
let ds = data.datasets[tooltipItem.datasetIndex];
return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
}
}
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: value => Math.abs(value)
}
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>
this snippet is based from uminder's answer
new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [{
label: 'Pasien Masuk',
data: [100, 90, 80, 70, 60],
backgroundColor: 'red',
},
{
label: 'Pasien Keluar',
data: [-100, -90, -80, -70, -60],
backgroundColor: 'blue',
},
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Data Pasien Keluar Masuk',
fontSize: 20,
},
legend: {
display: true,
position: 'bottom',
},
scales: {
xAxes: [{
stacked: true,
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value < 0? -(value) : value
}
}
}],
yAxes: [{
stacked: true
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
var value = tooltipItem.xLabel;
value = value < 0? -(value) : value
return label + ': ' + value;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>
The Chart.js code I have is:
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: tempDate.reverse(),
datasets: [{
label: '# of Votes',
data: [2000,2001,2002,2003],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
display: true
}
}]
}
}
});
and the result looks like this:
I am trying to remove the 2001.5 and 2002.5 from the y axis and also the 0 behind other values in y axis.
Basically I am trying to print exactly the data I am passing to it which is [2000,2001,2002,2003]
Use stepSize in your options
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero: false,
display: true
}
}]
}
}
I'm trying to hide the gridlines drawn outside the chart area, so basically like the option below, but for outside the chart area
gridLines: {
drawOnChartArea: false,
},
Presumably you are looking to disable the tick lines which can be achieved via the drawTicks property:
new Chart(document.getElementById('canvas'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'series1',
data: [1, 2, 4]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
padding: 10
}
}],
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
beginAtZero: true,
padding: 10
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas">
gridLines:
drawTicks: false;
}
Refer to the documentation for further information.