I need to show multiple values for a month, in a bar graph.
Similar to this:
But the only example I am coming up with, is stacked... where we have one bar, with multiple values.
What I have at the moment:
render() {
const options={
responsive: true,
legend: {
display: false,
},
type:'bar',
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
return (
<Bar
data={this.props.data}
width={null}
height={null}
options={options}
/>
)
And data is:
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
stack: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My second dataset',
backgroundColor: 'rgba(155,231,91,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
stack: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [45, 79, 10, 41, 16, 85, 20]
}
]
}
But this gives me:
Is there a way I can do grouping, instead of stacking?
Try this
remove scales from option
remove stack: 1 from datasets
Link to code in codesandbox
Related
I am using react-chart-2 Line to show graph;
What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']
and i have these value:
const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]
in my options scale i have
scales: {
x: {
grid: {
drawOnChartArea: false,
},
position: 'bottom' as const;
labels: colors
},
x1: {
grid: {
drawOnChartArea: true,
},
position: 'top' as const,
labels: sharpe,
},
y: {
beginAtZero: true,
ticks: {
maxTicksLimit: 5,
stepSize: 5,
},
},
},
and in my data i have
{
labels: colors,
datasets: [
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x'
},
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
}
the expected result is that i have 2 x axis , in the bottom is the colors and in the top the sharpe; one y axis; and the two line will be drawed but the colors depends on colorsData value and the sharpe depends on sharpeData value.
But instead the colors line is drawed as expected but the sharpe line follow the colors label instead of sharpe label
What you are trying to achieve is not possible. The values of the top and bottom axis should be the same. Unless you stack two charts on top of one another with css.
You can only have the same labels for both axis x and x1 or y and y1 respectively.
This is the official docs on Charts.js for y axis.
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
Here is some code to give you an idea of what I have come to with top and bottom x axis:
Options:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction:{
mode: "index",
intersect: false,
},
stacked: false,
scales: {
x:{
type: "linear",
display: true,
position: "bottom",
},
x1:{
type: "linear",
display: true,
position: "top",
grid: {
drawOnChartArea: false,
},
},
},
},
};
Data:
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
datasets: [
{
label: "Colors",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x',
},
{
label: "Shape",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
};
Hope this helps!
So I want to render a simple bar graph in my website, I am using react-chartjs-2 for the same but I can't seem to change the default fontsize or even the color of the x label and ylabels. I have gone through the other answers but none of them are working for me. I have been at it for the last 2 hours and I still can't figure out whats the problem.
Here is my code
import React from 'react'
import './model.css'
import {Bar} from 'react-chartjs-2'
function Model() {
const data = {
labels: ['red', 'blue', 'white', 'green'],
datasets: [
{
label: '# of days',
data: [6, 7, 2, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1,
},
],
};
const options= {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
return (
<div className="model-container">
<Bar
data={data}
options={options}
/>
</div>
)
}
export default Model
I would asume you are using v3, in v3 the scales have been reworked in how you write them, you can read all changed in the migration guide, to know for sure where to put the options and how there name is you can just check the documentation itself
var options = {
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: {
y: {
ticks: {
color: 'red',
font: {
size: 14,
}
}
},
x: {
ticks: {
color: 'red',
font: {
size: 14
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I am working on a React JS project. In my project, I need to create line chart components. I am trying to use Chart JS 2 library for React JS. But, now I am having a little problem customising the line chart. I want to remove the grids and the lines in the background (screenshot) and the label at the top of the chart (My first dataset).
This is my code.
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: true,
lineTension: 0.1,
backgroundColor: '#edfce9',
borderColor: '#3DAA1D',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#3DAA1D',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#3DAA1D',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
showLine: true
}
]
};
<Line data={data} />
How can I do that? Removing the grids (lines) in the background of the chart and removing the label at the top (My First dataset)?
Please take a look at the documentation. You can disable gridlines in the options (which you will have to add)
https://www.chartjs.org/docs/2.9.4/axes/cartesian/#common-configuration
options: {
scales: {
yAxes: [
gridLines: {
display: false
}
],
xAxes: [
gridLines: {
display: false
}
]
},
legend: {
display: false
}
}
V3:
options: {
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
}
I work with Chart.js and I would like to create a graph like the one in attachment. The idea is to write the values of the Y axis on the horizontal line. Can you help me ??
You can use the gridLines and ticks styling options to get the intended effect. Here is the relevant Chart.js documentation.
Specifically, for the Y axis, use the following settings:
gridLines: {
drawBorder: false,
color: '#aaa',
zeroLineColor: '#aaa',
tickMarkLength: 10,
offsetGridLines: true,
},
ticks: {
padding: 10,
mirror: true
}
The mirror and offsetGridLines settings are the most important here for creating the appearance of the grid lines extending below the axis labels.
This configuration creates the following effect:
Here's a runnable interactive example:
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: '#5595eb',
data: [10, 30, 39, 20, 25, 34, 0],
}, {
label: 'My Second dataset',
backgroundColor: '#433a93',
data: [18, 33, 22, 19, 11, 39, 30],
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
gridLines: {
drawBorder: false,
color: '#aaa',
zeroLineColor: '#aaa',
tickMarkLength: 10,
offsetGridLines: true,
},
ticks: {
padding: 10,
mirror: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
Maybe this plugin can help: chartjs-plugin-annotation
The plugin annotations like a horizontal line on the specific x/y axis.
The chart below I'm trying to create:
I am trying to add labels to my chart but it's showing as undefined. When I enter
labels: ["1", "2", "3"],
it gives the variable '1' to all the 1st variables. Any help on this would be brilliant. Thank you
const DummyChart = () => (
<Doughnut data={data} options={options} width={360} height={360} />
);
const data = {
datasets: [
{
label: "Dummy 1",
data: [487, 189],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
},
{
label: "Dummy 2",
data: [236, 764],
backgroundColor: ["rgba(0, 135, 136)"],
borderColor: ["rgba(0, 135, 136)"],
borderWidth: 1
},
{
label: "Dummy 3",
data: [811, 189],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
}
]
};
const options = {
responsive: true,
legend: {
display: false
},
rotation: Math.PI,
circumference: Math.PI,
cutout: 50
};
export default DummyChart;
Have you tried using point Labels on the chart. Additional chart js contains a label plugin which allows for more customization.
You can install it using this - npm i chartjs-plugin-labels.
Heres a link to a few demo's - https://emn178.github.io/chartjs-plugin-labels/samples/demo/
As per react-chartjs-2 examples there is a separate key named labels for that. You also have to use the tooltips options so you will be able to customize your labels. See the working example I made below:
var Doughnut = reactChartjs2.Doughnut;
const DummyChart = () => ( <Doughnut data={data} options = {options} width={360} height={360} />);
const data = {
labels: [
'Dummy 1',
'Dummy 2',
'Dummy 3',
],
datasets: [{
data: [487, 1000],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
},
{
data: [236, 1000],
backgroundColor: ["rgba(0, 135, 136)"],
borderColor: ["rgba(0, 135, 136)"],
borderWidth: 1
},
{
data: [811, 1000],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
}
]
};
const options = {
responsive: true,
legend: {
display: false
},
rotation: Math.PI,
circumference: Math.PI,
cutout: 50,
tooltips: {
callbacks: {
label: function(item, data) {
return data.labels[item.datasetIndex] + ' ' + data.datasets[item.datasetIndex].data[0] + '/' + data.datasets[item.datasetIndex].data[1]
}
}
}
};
ReactDOM.render(
<DummyChart /> ,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/chart.js#2.6.0/dist/Chart.js'></script>
<script src='https://unpkg.com/react-chartjs-2#2.1.0/dist/react-chartjs-2.js'>
</script>
<div id='app'></div>