Related
I am using React with hooks to pass filtered values to a chart.
The problem is that i was no able to pass the "filterData" values to the chart:
const filterData = data.datasets[0].data.filter(value => value > Number(filterdatanumber))
Any suggestion on how can i solve this?
I have tried different solutions existing in these videos https://www.youtube.com/watch?v=cz2rG-OVXXU, or create a new variable, among others, however nothing worked.
The complete code:
import React, { useState } from 'react';
import { Bar } from 'react-chartjs-2';
export default function VerticalBar() {
const [firstNumber, setFirstNumber] = useState("");
const textChangeHandler = (i) => {
setFirstNumber(i.target.value);
console.log("target.value", i.target.value);
filterChart(Number(i.target.value));
};
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 11, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
const filterChart = (filterdatanumber = Number.MIN_SAFE_INTEGER) => {
const filterData = data.datasets[0].data.filter(value => value > Number(filterdatanumber))
// const filterData = data.datasets[0].data.filter(value => value > 9)
const filterLabels = [];
const filterColors = [];
let i = 0;
for (i; i < filterData.length; i++) {
const result = data.datasets[0].data.indexOf(filterData[i]);
const labelsResult = data.labels[result];
const colorssResult = data.datasets[0].backgroundColor[result];
filterLabels.push(labelsResult );
filterColors.push(colorssResult);
}
console.log("filterData", filterData)
console.log("filterLabels", filterLabels)
console.log("filterColors",filterColors)
data.datasets[0].data = filterData;
data.labels = filterLabels;
data.datasets[0].backgroundColor = filterColors;
}
filterChart();
return (
<div >
<Bar data={data} />
<input value={firstNumber} type="number" name="firstNumber" onChange={textChangeHandler} />
</div>
)
}
your code has many problems regarding how you handle state date inside the component.
If data is constant then you can move it outside the component.
The function filterData can be replaced with a state holding the filtered data and a useEffect that will be triggered when another filterdatanumber state changes.
Here is an example code with these changes.
import React, { useState, useEffect } from "react";
import { Bar } from "react-chartjs-2";
const data = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
label: "Weekly Sales",
data: [18, 12, 6, 9, 11, 3, 9],
backgroundColor: [
"rgba(255, 26, 104, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(0, 0, 0, 0.2)",
],
borderColor: [
"rgba(255, 26, 104, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
"rgba(0, 0, 0, 1)",
],
borderWidth: 1,
},
],
};
export default function VerticalBar() {
const [firstNumber, setFirstNumber] = useState("");
const [filterdatanumber, setFilterdatanumber] = useState(
Number.MIN_SAFE_INTEGER
);
const [filteredData, setFilteredData] = useState(data);
const textChangeHandler = (i) => {
setFirstNumber(i.target.value);
console.log("target.value", i.target.value);
filterChart(Number(i.target.value));
};
useEffect(() => {
const newData = { ...data };
const filteredData = [];
const filterLabels = [];
const filterColors = [];
for (let i = 0; i < newData.datasets[0].data.length; i++) {
const value = newData.datasets[0].data[i]
if (value > Number(filterdatanumber)) {
const labelsResult = newData.labels[i];
const colorssResult = newData.datasets[0].backgroundColor[i];
filterLabels.push(labelsResult);
filterColors.push(colorssResult);
filteredData.push(value)
}
}
console.log("filteredData", filteredData);
console.log("filterLabels", filterLabels);
console.log("filterColors", filterColors);
newData.datasets[0].data = filteredData;
newData.labels = filterLabels;
newData.datasets[0].backgroundColor = filterColors;
setFilteredData(newData);
}, [filterdatanumber]);
return (
<div>
<Bar data={filteredData} />
<input
value={firstNumber}
type="number"
name="firstNumber"
onChange={textChangeHandler}
/>
</div>
);
}
Please remember that this code is just an example, maybe it will need some edits in order to match your needs.
Here is my final solution fully working and with a refactored 3rd approach. The values are matching the keys consistently when filtered and displayed correctly in the chart.
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Bar } from "react-chartjs-2";
export default function VerticalBar() {
const [data, setData] = useState ([
{val: 18, label: "Mon"},
{val: 1, label: "Tue"},
{val: 5, label: "Wed"},
{val: 8, label: "Thu"},
{val: 19, label: "Fri"},
{val: 5, label: "Sat"},
{val: 7, label: "Sun"}
])
const chartConfig = useMemo(() => {
return {
labels: data.map(el => el.label),
datasets: [
{
label: "Weekly Sales",
data: data.map(el => el.val),
backgroundColor: [
"rgba(255, 26, 104, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(0, 0, 0, 0.2)",
],
borderColor: [
"rgba(255, 26, 104, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
"rgba(0, 0, 0, 1)",
],
borderWidth: 1,
},
],
};
}, [data])
const textChangeHandler = useCallback(
(event) => {
setData(prevData => {
return prevData.filter((el) => parseInt(event.target.value, 10) < el.val)
})
}, [setData]);
return (
<div>
<Bar data={chartConfig} />
<input
type="number"
name="firstNumber"
onChange={textChangeHandler}
/>
</div>
);
}
i want to create a chart with Chart.js and React that has a persistant yAxis ranging form -15 to 15 with a stepSize of 5.
As an example i copied the dynamic Bar Chart that can be found here:
https://reactchartjs.github.io/react-chartjs-2/#/dynamic-bar
the documentation of charjs.org mentions min and max properties of the Axis here:
https://www.chartjs.org/docs/3.2.0/samples/scales/linear-min-max.html
but react-chartjs-2 seems to ignore these values. I tried:
Old Naming: scales.yAxis
New Naming: scales.y
adding "scaleOverride : true" to options.scales and option.scales.y
inside the "ticks"
outside the "ticks"
Removing everything in the config.scales.y but min, max and stepsize with old and new naming
My current App.js:
import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';
const rand = () => Math.round(Math.random() * 20 - 10);
const genData = () => ({
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Scale',
data: [rand(), rand(), rand(), rand(), rand(), rand()],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
});
const options = {
scales: {
scaleOverride : true,
y: [
{
type: "time",
ticks: {
min: 0,
max: 150,
stepSize: 20
},
},
],
x: [
{
type: "Amp",
ticks: {
},
},
],
},
};
function App() {
const [data, setData] = useState(genData());
useEffect(() => {
const interval = setInterval(() => setData(genData()), 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<Bar className="Linechart" data={data} options={options} />
</>
);
};
export default App;
Can someone please explain to me what is the correct way to set the y-Axis to a fixed range? Thanks in advance.
It was a simple syntax error. Using this config works:
const options = {
scales: {
y:
{
min: -15,
max: 15,
stepSize: 5,
},
x:
{
},
},
};
According to the documentation, use this
scales: {
y: {
min: -1,
max: 1,
ticks: {
stepSize: 1,
},
},
},
Basically, add the stepSize inside the ticks prop
The above accepted answer did not seem to work for me.
I found this solution and it works just fine customising the scale on the y-axis of the bar chart using react-chartjs-2 library.
const chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
min: 0,
stepSize: 2,
callback: function(value) {
return `${value}`
}
}
}]
}
}
use this Object in your barchart like so:
<Bar data={data} options={chartOptions} />
Need your help. Component is already created for Bar chart as it is said in the documentations. Now want to add data to the Bar chart but it is not adding. The code is following
const data = {
type:"bar",
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Statistics',
data: [4, 10, 7, 1, 8, 9],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 4,
responsive: true,
},
],
};
const options = {
scales: {
YAxes: [
{
ticks: {
beginAtZero: 8,
},
},
],
},
};
const Dashboard = (props) => {
const addDatasets= ()=>{
const myChart= new Chart()
const newData= {
label:"Statistics of activity",
data:[8,10,9, 17,25, 31],
backgroundColor: [
"red",
],
borderColor: [
'blue',
],
borderWidth: 4,
}
data.datasets.push(newData)
myChart.update()
}
return (
<>
<div className='header'>
<h1 className='title'>Vertical Bar Chart</h1>
<div className='links'>
<a
className='btn btn-gh'
href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/VerticalBar.js'
>
Github Source
</a>
</div>
</div>
<Bar data={data} options={options} />
<button onClick={addDatasets}>Add Datasets</button>
</>
);
};
Think that the problem is comming from this part
const myChart= new Chart()
in the internet can not find sources to solve the problem. What is the problem?
I used class component in the chartjs shared my usage in the below,
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
#observer
export class Home extends React.Component<{}, IHomeState> {
constructor(props: any) {
super(props);
this.state = {
isReady: false,
isLoading: false,
data: {
labels: ["", ""],
datasets: [],
},
};
this.handleSelect = this.handleSelect.bind(this)
this.getKeywords = this.getKeywords.bind(this);
}
async getKeywords() {
this.setState({
isReady: false,
data: {
datasets:[],
labels:[]
},
isLoading: true,
})
let labels: string[] = []
const data = {
labels: ['', ''],
datasets: [],
} as any;
try {
let graphData1: DocumentResponseModel[] = await BaseMapper.mapToGraphData();
//How many types of the result / positives,negatives and mixed
graphData1.forEach((item: DocumentResponseModel) => {
if (!labels.includes(item.sentiment)) {
labels.push(item.sentiment)
}
})
this.setState({
isReady: true,
isLoading: false,
data: {
labels: "first","second"],
datasets: data.datasets
},
})
} catch (e) {
alert(e)
}
}
async componentDidMount() {
}
render() {
let {isReady, isLoading} = this.state;
const renderLoading = () => {
if (!isReady && isLoading) {
return (
<CircleToBlockLoading/>
)
} else {
return
}
}
return (
<div className={styles.container}>
<Button variant="contained" onClick={this.getKeywords} color="primary">Get</Button>
<Bar data={this.state.data} options={options} type={"bar"}/>
</div>
);
}
}
I'm applying a linear gradient to barcharts the way described in the doc successfully.
https://www.chartjs.org/docs/latest/samples/advanced/linear-gradient.html
In the case I have 2 datasets or more as bar types each, I want to apply different color gradients to each dataset.
I have tried adding a second function called getGradient2 or to pass the colors as parameters as shown below, however the render ignores the second colors and apply the first gradient to all datasets
let width, height, gradient;
function getGradient(ctx, chartArea, start_color, stop_color) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, stop_color);
gradient.addColorStop(1, start_color);
}
return gradient;
}
Then the implementation:
data: data_array[0],
borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100, bottomLeft: 100 },
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) { return null; }
return getGradient2(ctx, chartArea, "rgba(182, 86, 235, 1)", "rgba(182, 86, 235, 0.66)");
}, barPercentage: 1.0, categoryPercentage: 1.0,
barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
And for the second dataset:
data: data_array[1],
borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100, bottomLeft: 100 },
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) { return null; }
return getGradient2(ctx, chartArea, "rgba(244, 102, 235, 1)", "rgba(244, 102, 235, 0.66)");
}, barPercentage: 1.0, categoryPercentage: 1.0,
barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
Seems like a bug to me but they say to post on SO on GitHub, so let me know if you find a way to make it work :)
You need to define this line let width, height, gradient; within your function so its bound to the function and wont get overriden then it works just fine:
const getGradient = (ctx, chartArea, start_color, stop_color) => {
let width, height, gradient;
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, stop_color);
gradient.addColorStop(1, start_color);
}
return gradient;
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: function(context) {
const chart = context.chart;
const {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea, "rgba(182, 86, 235, 1)", "rgba(182, 86, 235, 0.66)");
}
},
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: function(context) {
const chart = context.chart;
const {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea, "rgba(244, 102, 235, 1)", "rgba(244, 102, 235, 0.66)");
}
}
]
},
options: {
}
});
<script src="https://npmcdn.com/chart.js#3.9.1/dist/chart.min.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
I am trying to remove/show the particular 'horizontalBar' line after clicking on legend of pie chart:
On legend call back function i can easily get the index value and text value by the below code
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
}
}
below code is used to generate the pie chart.
var ctx = document.getElementById('myChart');
var mychart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(155, 10, 132)',
'rgb(55, 20, 132)',
'rgb(85, 30, 132)',
'rgb(69, 20, 132)',
'rgb(20, 100, 132)',
],
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
}
},
}
});
and the below chart is used to generate the bar chart as below:
var ctx2 = document.getElementById('myChart2');
var myChart2 = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: '# of Votes',
data: [0, 10, 5, 2, 20, 30, 45],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display : true,
},
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
});
Is it possible to hide/show the particular horizontal line if check/unchecked the pie chart legend.
Please help me here.
use below code on legend in chart2 that is Horizontal bar(legend onClick event)
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
//if legend is hidden hide the below data from the list also remove the data from the list items
var __text = legendItem.text;
var __split_text = __text.split(" ").join('_').toLowerCase();
var checked_unchecked_data_value = myChart2.data['datasets'][0]['data'][legendItem.index];
var checked_unchecked_date_label_value = myChart2.data['labels'][legendItem.index];
/*
my chart index and label value getting for the delete purpose
becz on delete index value is changed so doing the same
*/
//var __delete_checked_unchecked_data_value = myChart.data['datasets'][0]['data'][legendItem.index];
//var __delete_checked_unchecked_date_label_value = myChart.data['labels'][legendItem.index];
if(!legendItem.hidden){
$(".serial_"+legendItem.index).hide();
$(".section_"+__split_text).hide();
addSerialNumberAPCSUSelect();
/*var index_dataset = myChart.data.datasets[0].data.indexOf(__delete_checked_unchecked_data_value);
if(index_dataset > -1){
myChart.data.datasets[0].data.splice(index_dataset,1);
}
var index_label = myChart.data.labels.indexOf(__delete_checked_unchecked_date_label_value);
console.log("index data at " + index_dataset + " label index at " + index_label);
if(index_label > -1){
myChart.data.labels.splice(index_label,1);
}*/
myChart.data.datasets[0].data[legendItem.index] = 0;
myChart.data.labels[legendItem.index] = '';
myChart.update();
//console.log(" bar chart index changed at after remove" );
//console.log(myChart.data);
}else{
$(".serial_"+legendItem.index).show();
$(".section_"+__split_text).show();
addSerialNumberAPCSUSelect();
//myLineChart.data.datasets[0].data[2] = 50;
/*var data = [];
label = legendItem.text;
data[checked_unchecked_data_value] = checked_unchecked_date_label_value;
addData(myChart, label, data);*/
//myChart.data.datasets[0].data[checked_unchecked_data_value] = checked_unchecked_date_label_value;
myChart.data.datasets[0].data[legendItem.index] = checked_unchecked_data_value;
myChart.data.labels[legendItem.index] = checked_unchecked_date_label_value;
myChart.update();
}
}
}