score:0
Accepted answer
accessing barchart.data
seems wrong as, barchart
is basically a functional react component.
what you want is probably this:
- you have a
data
array. - you want to show that
data
in abarchart
- you want to give a
button
to the user such that when user clicks that button, a new row is added into thatdata
array. - and when that
data
array changes, you want thebarchart
to refresh and display the updateddata
array.
if this is the case, then i would recommend checking the lifting state up in the react docs. it is pretty much the same use case here. you have a single data source shared across 2 components.
also, check the usage of react hooks for checking state usage: https://reactjs.org/docs/hooks-state.html
here is a pseudocode you can try:
parentcomponent = () => {
// 1. create your data state here using react hooks
const [data, setdata] = usestate([someinitialdata]);
return (
<div>
// 2. barchart now relies on the data in the state
// whenever the data updates, the chart refreshes
<barchart data={data}/>
// 3. pass setdata to the component and trigger it with the
// button's onclick handler
<buttonchart updatedata={setdata}/>
</div>
);
}
Source: stackoverflow.com
Related Query
- In react.js with chart.js, I can't access to my data in a componant
- Limit data points with chart js in React
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- How to display data labels outside in pie chart with lines in ionic
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
- React ChartJS 2 : Get data on clicking the chart
- Show "No Data" message for Pie chart with no data
- Populating javascript chart with Razor model data
- Using data from API with Chart JS
- chart js with angular2 loading dynamic data only after zoomin
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- Chart JS not showing On hover with small data
- How to create chartjs chart with data from database C#
- React chart : prevent chart's canvas scaling with height and width
- Graph streaming real-time data with react and chartjs
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Angular Charts.js: Can't refresh chart with data
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- How to use JSON data in creating a chart with chartjs?
- React component wont re-render ChartJS chart with redux props
- Doughnut Chart not displaying data with Chart Js and Backbone js
- How to display chart using Chartjs with JSON data in Laravel
- Initialize a Chart.js chart with data from an api
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- generating a Chart.js chart with python data
- Drawing line chart in chart.js with json data
More Query from same tag
- Chart.js jQuery dropdown selected values
- Graph is not displayed
- ChartJS changing displayed data based on dropdown selection
- How can I get chart.js to automatically add colours for dynamic labels?
- Move tooltip further from data point for Chart.js?
- The bar that contains a low value is almost invisible on the chartjs
- Can a service get access to component's template
- Angular ChartJS 2.9.4 issue updating chart
- Rendering Rails json data in chartjs
- Multiple Charts of the Same Type in ChartJS2 ReactJS - Buggy Tooltips
- ChartJS: Draw line between two data points on hover
- Chart.js plot live data
- Chart.js - generateLegend() call results in "undefined is not a function"
- Is there a way to hide/customize ChartJS' above legend?
- using library without 'require' when using CDN
- Why is only a single chart of three updated with react-chartjs-2?
- Chart JS display Data Value on the top of the Bar
- using ajax populate dynamic piechart from chartjs
- How to add "shadow" on hovering bar chart?
- Multiple charts in one page - Chartjs
- How do I align chart.js pie charts?
- ChartJS fixed y axis on scroll
- Can I set different fill color based on a given threshold in Chart.js?
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- concatenate on tooltip from data array in chart js
- How to put 2 charts next to each other
- How To Use Api Data With Vue Chart.js
- Chart.js version 2.2.1 wont show chart
- Printing Chart using ngPrint and tc-chartjs
- Canvas width/height not updating on internet explorer