I'm new to React, and I'm trying to figure out how to setState to the object, but it doesn't work when I this.setState({ datasets[0].data: }), in the function what do I need to do here??
state={
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [0, 10, 5, 2, 20, 30, 45],
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
}]
}
change = () => {
this.setState({
datasets:
})
}
this.setState((prevState) => {
const datasets = prevState.datasets;
datasets[0].label = newLabel; //you can change particular value this way
return {datasets};
});
What this does is actually make a copy of prevState datasets array of objects and the mutates its value as per the requirement. Once the changes are done, we will setState value with the value of the updated datasets.
Related
I am using react-chart-2.
I would like to set the minimum value of the y-axis to 0 and the maximum value to 100.
Now, the y-axis is determined according to the data value.
How can I customize the value of the y-axis?
code
import "./styles.css";
import { Line } from "react-chartjs-2";
const App = () => {
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "a",
data: [30, 10, 10, 40, 20, 10, 30],
fill: false
}
]
};
const options = {
responsive: true,
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
max: 1000,
min: 0
}
}
]
}
};
return (
<div className="App">
<Line data={data} options={options} />
</div>
);
};
export default App;
I made bar chart in react-chartjs-2. I want to show data value of each bar on the top of the bar. For that I used the plugin calls chartjs-plugin-datalabels But it's not showing anything.
is it possible to show each value of bar chart ?
I want to show data value somethings like this.
Here is my code.
import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";
export default class Button extends Component {
render() {
const dataBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "#EC932F",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
const options = {
plugins: {
datalabels: {
display: true,
color: "black"
}
},
legend: {
display: false
}
};
return (
<div>
<Bar data={dataBar} options={options} width={100} height={50} />
</div>
);
}
}
Any help would be appreciated.
import React, { Component } from "react";
import Chart from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";
export default class Button extends Component {
componentDidMount() {
Chart.register(ChartDataLabels);
}
render() {
const dataBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "#EC932F",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
const options = {
plugins: {
datalabels: {
display: true,
color: "black",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
}
},
legend: {
display: false
}
};
return (
<div>
<Bar data={dataBar} options={options} width={100} height={50} />
</div>
);
}
}
Here you can see in componentDidMount we have registered chart data label plugin for displaying data.
And another thing is in the options added few more parameters as per below field
anchor: "end",
offset: -20,
align: "start"
This is used for displaying data in the top.
The react-chartjs-2 package holds a plugin property which can be set on the components.
Change the import from:
import "chartjs-plugin-datalabels";
to:
import ChartDataLabels from 'chartjs-plugin-datalabels';
On your component, add the plugin variable which holds the imported value.
from:
<Line data={data} options={options} />
to:
<Line data={data} plugins={[ChartDataLabels]} options={options} />
See this original stackoverflow answer to the similar question
use this "chartjs-plugin-datalabels": "^0.5.0" version
it works for me
Here is working example
https://codesandbox.io/s/barchart-knycb
const options2 = {
plugins: {
datalabels: {
anchor: "end",
align: "start",
formatter:(value,context)=>{
const datasetArray = []
context.chart.data.datasets.forEach((dataset)=>{
if(dataset.data[context.dataIndex] != undefined){
datasetArray.push(dataset.data[context.dataIndex])
}
})
function totalSum(total, datapoint){
return total + datapoint;
}
let sum = datasetArray.reduce(totalSum,0)
if(context.datasetIndex == datasetArray.length-1)
return sum
else
return ''
},
},
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked',
},
},
responsive: true,
scales: {
x: {
stacked: true,
ticks: {
maxRotation: 70,
minRotation: 70
}
},
y: {
stacked: true,
},
},
};
const data1 = {
labels,
datasets: [
{
label: 'Dataset One',
data: [1,2,3,4,5,6,7],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset Two',
data: [1,8,3,4,9,6,7],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
Pass array data (dynamically) to chart.js using laravel, this "data: [65, 59, 80, 0, 56, 55, 40],"which holds numbers should contain info from database.
<canvas id="myChart" width="400" height="250"></canvas>
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
function adddata(){
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
I am testing the data from database and l know that my array contains data but when it comes to show in chart.js is blank
I have implemented a react-chart using the help of the following doc
http://www.chartjs.org/docs/latest/charts/line.html
I have implemented it successfully but this doc not show how to set a maximum value for the y axis. I want to set the max y axis for 100. But because my dataset does not exceed any value over 19, the max y axis is set at 20.
How can i set the max y axis value for 100 even though my data does not exceed 19.?
My code
class LineCharts extends Component {
constructor() {
super();
}
render() {
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: true,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 1,
scaleSteps: 5,
data: [12, 19, 3, 5, 2, 3, 4, 7, 9, 3, 12, 19],
},
],
}
var chartOptions = {
showScale: true,
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
},
}
return (
<LineChart data={chartData} options={chartOptions} width="600" height="250"/>
);
}
}
export default LineCharts;
You can try this:
var chartOptions = {
showScale: true,
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 100
}
}]
}
}
Docs
I am using react-chartjs, and now I am having a problem that my chart is not rendered with no error at all in my console.
Previously, when I installed the react-chartjs and the chartjs there was always error Unmet peer dependency: eslint-plugin-jsx-a11y#3.0.2. Although I am not sure if that is related.
Here is my presentation component:
import React, { PropTypes } from 'react';
import Chart from 'chart.js';
import { Line as LineChart } from 'react-chartjs';
const StatsGraph = (props) =>
<div>
<LineChart data={props.helpsPosted} redraw width="600" height="250" />
</div>;
StatsGraph.propTypes = {
helpsPosted: PropTypes.object.isRequired,
};
export default StatsGraph;
and here is my helpsPosted props:
const helpsPosted = {
chartData: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
datasets: [
{
label: "Helps posted",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 40, 0, 21, 10, 0],
spanGaps: false,
},
],
},
};
Any help would be appreciated. Thanks!