score:1
Accepted answer
turns out that the issue wasn't chart.js at all; it was the asynchronous nature of data retrieval from firebase. i added a ref.on(....) and populate the arrays as mentioned in the answer by @john townsend, and it is rendering correctly now. thanks for your help!
score:1
you will want to do
this.weightchart.data.datasets[0].data.concat(weightarr);
this.weightchart.update();
and so on for the other datasets. if the concat isn't working, you'll want to loop through weightarr and push to the chart, then update.
for (var i = 0 ; i < weightarr.length; i++){
this.weightchart.data.datasets[0].data.push(weightarr[i]);
}
this.weightchart.update();
hope this helps!
Source: stackoverflow.com
Related Query
- Passing Array to Chart.js not working, chart not rendering
- Chartjs not rendering chart and no error thrown
- Time Series Line chart js in react not working
- Chart JS not rendering on iOS devices
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- Chart not rendering w/Chart.js on button click
- Click event of stacked line chart not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Chart.js chart not rendering
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Css style not working well when resizing chart height in angular application
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- Chart JS chart not rendering in ArcGIS popup when using navigation arrows
- Passing an Array from a Flask view to the javascript code of another view
- Rendering Chart.js Bubble Chart Using Array Data
- in chart js tooltip font size is not working
- Chart JS not working with date
- Background color of the chart area in chartjs not working
- Chartjs with Vue, Bar Chart Border Radius not working
- charts js, doughnut chart not rendering tooptips correctly
- Chart.js bubble chart pointStyle not working
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Why is this bar chart using chart.js not rendering in react.js?
- Charts.js - Bar chart different colors for value intervals not working
- chart js not dispalying data array that comes from an axios request
- Chart not rendering with pug/jade and nodejs
- Chart JS not working with Phonegap
- Dynamic data in bar chart not rendering React js
More Query from same tag
- Combine multiple columns values to one label in chart.js
- Skip labels when associated value is null in chartJS
- Height for chart area (not the canvas size)?
- Using Createjs and Chartjs
- Jinja throughs "SyntaxError: expected property name, got '%' " error
- Charts.js & Bootstrap Accordion
- Chart.js I want to fix my xAxis to my yAxis position 0
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- Data Labels are getting cut off on the top
- Chart.js add tooltip at intersection of axes (break even)
- create a multi line chart using Chart.js
- chart.js cuts off canvas - but padding makes doughnut very small
- Chart js custom single tooltip not working
- Canvas static height Chartjs
- Declare data value dynamicaly to chart js
- How to retrieve data from mysql to chart.js
- ChartJS - Bottom labels displayed vertically
- Chartjs bar dataset label not showing
- Chart.js using the value of certain data in external json file
- How to display small numbers in chart js tooltip?
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- ChartJS for 1 and 0 values display true or false
- display multiple charts angular.js chart.js
- trouble with making floating bar charts using chart.js
- Bar charts flickering issue in charts js
- Chart.js responsive option - Chart not filling container
- Chart.js Point image on hover
- Drawing chart with Chart.js filled with data gotten per JsonRPC
- How to wait for data in useEffect hook before displaying it?
- Chart js. How to align text by the center of the tooltip?