score:0
Accepted answer
you have to create a config
variable like this:
public config = {
type: 'bar',
legend: true,
data: {
labels: [ "incoming" , "missed" , "outgoing"],
datasets: [{
label: 'calls',
data: []
}]
}
}
in your html
file, put this:
<div style="display: block">
<canvas id="canvas" style="display: block"></canvas>
</div>
in the ngoninit()
function do this (variables ctx
and mybarchart
must be defined earlier):
this.ctx = document.getelementbyid('canvas') as htmlcanvaselement
this.mybarchart = new chart(this.ctx.getcontext('2d'), this.config)
when you want to update the data, you can do it this way:
this.mybarchart.data.datasets[0].data = your_firebase_data;
this.mybarchart.update()
cheers
Source: stackoverflow.com
Related Query
- How to Push data dynamically from firebase to bar graph in angular
- Calling data from search bar to chart.js graph in Angular
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How to set the chartjs bar graph scale to the highest value in the result data
- How to plot Firebase data with Chartjs in angular
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- Chart.js and Angular 8 - Dynamically updating Chart.js labels and data from *ngfor
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How to add data dynamically to primevue Line chart from vuejs3?
- graph data from a angular form to ChartJs
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- How to keep side bars in Chartjs bar graph from clipping?
- Angular 2+: How to load a data to chartjs graph in every second in Angular
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- how to add multiple data in chart js dynamically from JSON
- How to create rounded bar graph with Angular 7 and Chartjs (v2)
- How to take data from an API and create a chart on that using Chart.js and Angular 8?
- How can I query data from my Cosmos DB in Angular 7?
- How to Integrating Chart.js with Angular 7 with Data from database
- How to display data values on bar graph (chart.js)?
- How to display data from database into line graph using php and mysql?
- Angular 13, Chart.js, ng2-chart Update data from API dynamically
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js Bar Chart - how to chart bars from 0
- How to push datasets dynamically for chart.js (bar chart)?
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- How can I sort data from highest to lowest in chart.js
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
More Query from same tag
- Is there any way I can customize my chartjs
- How get values on legend label withn Chart js on Angular
- Chart.js: Can I change the "OriginalOptions" variable within the chartjs-zoom-plugin?
- Chart.js chart won't animate inside of bootstrap carousel
- Chart.js canvas : can't center it
- Update the Chartjs push data with ajax
- Reopening a "ChartJS" chart in a new window (VS, C#, ChartJS)
- chartjs default background color to columns
- import Json formatted values to create bar charts with Chart.js
- Change background color of label Chart.js
- Labels (category type) on left and right of bar chart using chart.js?
- angular-chart.js not rendering any chart
- Chart.js not appearing in tabs
- How to render Chart.js 2.x tooltips on top of everything
- chart js how do I only show just the low/high dots on line chart?
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Error in created hook (Promise/async): "TypeError: Cannot read property 'position' of undefined"
- chart.js barchart without set fill color
- Graphing the timestamp and data from mysql
- Chart.js how to display % on tooltip
- How to have solid colored bars in angular-chart bar chart
- How to apply to different bground color for each area in Chart.js
- Unable to display chartjs chart in Shiny UI
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Exponential decrease
- How to remove the Chart.js x Axis bottom line?
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- chart.js - Disable labels
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- Chart.js - each dataset value = different axis