score:1
this is a slightly different approach, but i think it's simpler than what you're doing:
stop using state
try passing arrays as parameters into your function, and then send the parameters directly to the chart data object, and then initiating the chart directly from inside the function (i avoid using react state in this case because it has a lag, and chart.js wants to initiate instantly).
here's a small example:
let barchart;
let newlabels = ["label1", "label2", "label3"];
let newdata = ["data1", "data2", "data3"];
createbarchart = (labels, data) => {
let ctx = "bar_l1_chart";
barchart = new chart(ctx, {
type: 'horizontalbar',
data: {
labels: [labels],
datasets: [{
label: 'sentiment',
data: [data],
}]
},
});
};
this.createbarchart(newlabels, newdata);
now you just update the "newlabels" or "newdata" arrays, and re-call the function. a good way to do that is with react state managers, like:
componentwillrecieveprops(newprops){
if(newprops.labels && newprops.data) {
if(barchart){barchart.destroy()};
this.createbarchart(newprops.labels, newprops.data)
}
}
you will also need to "destroy()" the chart, before you recreate it. hopefully this is helpful!
Source: stackoverflow.com
Related Query
- Chartjs in Reactjs - how can I update data dynamically?
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How can I load multiple Chartjs charts with different data on the same page?
- How to add new data point and remove leftmost data point dynamically in Chartjs
- how labels in chartjs can make data invisible
- How can i do so that my chartjs updates everytime data is inserted or by time interval?
- How can I pass the data into the chartjs label?
- How to dynamically update data of line chart used with chart Js?
- My Chartjs is not updating after setstate full code attached Reactjs Update
- How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)
- How to dynamically update Chartjs legend label colors?
- Chartjs - How to update the data from values in my database?
- How can I reload data from chartjs after JSON file was modified in a HTTP POST
- How can i fix my code so i can read my data
- Dynamically update values of a chartjs chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Dynamically update the options of a chart in chartjs using Javascript
- How can I hide tooltip in Chart.js on a specific data label?
- How can I sort data from highest to lowest in chart.js
- Show data dynamically in line chart - ChartJS
- How to show data values or index labels in ChartJs (Latest Version)
- How to feed hour and minute data into chartJS
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How can I force my ChartJS canvas legend to stay in a single column?
- How to update data Chart in async way in Angular Chart.js?
- How to dynamically set ChartJs line chart width based on dataset size?
- How can I sort, insert in between and update full dataset in chartjs?
More Query from same tag
- vue js bar-chart gradient color not showing
- Angular: chart.js chart is not displaying
- Chart.JS fixing maximum and minumum to a location on screen
- I can not properly re scale <canvas> with width and height attributes
- Dynamically loaded chart data not showing Chartjs React
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- Chart.js bar chart is overflowing its containing element
- how to put a second pie chart right next to first pie chart inside the bootstrap card
- Can't figure out why the values in my objects are changing
- change legend item style when dataset is hidden
- Chart.js showing only last data value
- Chart.js not working - Uncaught RefernceError:
- Line Chart: background of RangeSlider
- Charts.js line chart, how to hide y-axis start and end label if data is same
- Assigning a value to an object w/bracket notation
- Type error in using chartjs and tc-angular-chartjs
- Chart.js not initiating
- why Graph is not showing until i minimize window. (using chart.js )
- Loop through multiple rows as labels and data in chart.js and PHP
- Chart.JS changing the animations
- ng2Charts/chart.js changing chart type for one is impacting many charts
- Making angular-chartjs responsive with UI-Grid
- How to add text in centre of the doughnut chart using Chart.js?
- Remove chartjs pie chart highlight on hover
- Creating a stacked budget Vs Actual chart
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
- How can i add min and max range horizontal line in angular-chart.js
- Chart Js Line chart with fill on click with full information of its legend text
- Javascript not showing up total value in middle of Oracle APEX Donut chart
- Unable to separate elements of JSON