score:2
so the problem that you describe is that data is added to your component state when the component is re-rendered. in the code snipped you have supplied, you dont use any of the life cycle methods in react that can be triggered on re-renders. and i cannot see any other hooks that should trigger on a re-render. therefore i cant find any source to your problem.
however, i can see other issues that might make debugging harder for you. solving these might help you in nailing down the actual problem. in the componentdidmount
method you call functions whose only purpose is to update the state. this is not good design since it will force the component to immediately re-render several times whenever it is mounted.
a better design is to fully prepare the chartdata-objekt in the constructor. for example, you could change your chartcolors
function to take a chartdata object as a parameter, and return the new object with colors added. then make your constructor look something like this:
constructor(props) {
super(props);
const chartdatawithoutcolors = {
labels: [],
datasets: [
{
//label: "quotes",
data: [],
backgroundcolor: []
}
]
}
const chartdatawithcolor = this.chartcolors(chartdatawithoutcolors);
this.state = {
chartdata: chartdatawithcolor
};
}
by removing unnecessary calls to setstate
you will make your components life both simpler and more performant. when you have simplified your component, start debugging by removing non-critical parts one at the time and try to nail down when your problem disappears. this should be sufficient to find the bug.
good luck!
Source: stackoverflow.com
Related Query
- React ChartJS prevent new data from being added into state after it's redrawn?
- Prevent label of another data from being toggled whenever a label from one data is toggled
- Passing JSON data from PHP array into ChartJS
- Problems hovering over ChartJS bar chart after being redrawn
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Updating chart.js not working after recieved new data from database with ajax
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- To display data from mock server into chartjs using ember
- ChartJS chart is bugged after adding new data
- Calling data from outside of Chartjs code
- React and Chartjs not updating from dynamic data through api
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- Chartjs not reading data from vuex mapped state
- Not being able to display value from json data into chart js
- How can I reload data from chartjs after JSON file was modified in a HTTP POST
- How do I fetch data from 2 tables and display into 1 chartjs
- Chartjs random colors for each part of pie chart with data dynamically from database
- How do I prevent the scale labels from being cut off in chartjs?
- How to prevent first/last bars from being cut off in a chart with time scale
- How to feed hour and minute data into chartJS
- Prevent y-axis labels from being cut off
- React ChartJS 2 : Get data on clicking the chart
- Filter ChartJS using data from PHP
- Chartjs - Insert additional data into chart tooltip
- Can't pass array to chart.js which got its data from @Input
- Importing data from Model into a View gives me an error I cannot solve
- Chart.js load new data from saved JSON object
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Stacked bar chart starting from 0 - ChartJS React
- How to create chartjs chart with data from database C#
More Query from same tag
- Chart.js v2: How to make tooltips always appear on line chart?
- Svelte , pass data to chartjs from API
- How to inject "Chart.js" in my module?
- Chartjs : Y axis starting with highest datapoint
- Can't change the time of the xAxes in the Chart.js
- Align a data label below a point on a bubble graph (Chart.JS)
- How to make `fillColor` as gradient in chart.js?
- Background-color for area below line chart in chartJs?
- Format x axis to show percent with Primefaces/Chartjs ScatterChart
- Chart.js Timeseries chart - formatting and missing data values
- Use chart.js with freemarker tamplates
- How to sum the array value in javascript like chartjs data array and input value sum
- Horizontal overlapping of bars, not whole graph
- ChartJs error in displaying my array data
- integrate a scroll bar along with chartjs-zoom-plugin
- Escape symbol '<%=' and '%>'
- How can i create a background of moving graphs like chartsjs?
- How to turn off tooltip for primeng pie chart?
- django + chart.js: page language switch button mess up the charts. What?
- how to highlight stack bar in ChartJS with onclick
- getting additional value fields from data source for dx.chartjs doughnut chart
- ChartJS - Help me custom tooltip
- setting uneven tick stepsize spacing with chart.js
- Uncaught type error: mychart.update is not a function
- How do i make a new chart by pressing a button (chart.js)?
- Line chart with combination of fill and line
- Charts .js update when array changes
- How to dynamically call function with a for loop within Chart.js (JS)
- How to chnage this value theHour[0].times into time format (HH:mm) using moment.js
- Unique identifier in Chartjs Bar segments?