Questions tagged chart.js

Explore the latest questions and answers asked by our top developers.

How to realize stacked horizontal bar with chart.js for angular project like a screen [closed]

faced the problem of creating such a bar, who is well familiar with the chart library. do you have any ideas? Source: Angular Questions

By Victor Sakhno
Published
Categorized as angular, chart.js, charts, javascript Tagged , , ,

Half donut Chart text at start & end (Chart.js) [Typescript] {Angular}

I have a half donut chart and I want to display 2 text at the ends, however the chart is responsive and the text needs to be in the correct position as the div grows and shrinks. Any tips on how I can do it? Example Here Source: Angular Questions

By Andre
Published
Categorized as angular, chart.js, css, html, typescript Tagged , , , ,

Half donut Chart text at start & end (Chart.js)

I have a half donut chart and I want to display 2 text at the ends, however the chart is responsive and the text needs to be in the correct position as the div grows and shrinks. Any tips on how I can do it? Example Here Source: Angular Questions

By Andre
Published
Categorized as angular, chart.js, css, html, typescript Tagged , , , ,

Updating Chart Data on Charts.js with Ng2-Charts

So im using chart.js and ng2-charts to create some gauges charts for my platform to monitore the level of fluids inside a tank of a machine. I get those values by a external API and Im runing into a problem that the Charts are being rendered before I get the values form the API. Is […]

By Andre Mendes
Published
Categorized as angular, chart.js, charts, javascript, ng2-charts Tagged , , , ,

Ng2 ChartData filled with observable

I want to fill my NG2 diagram with different values ​​from an observable. With the following code I can get the IDs that I use as labels. The next step is to calculate an average value using the values ​​behind the IDs. There is a problem with that. The data is made available by the […]

By Jonas960
Published
Categorized as angular, chart.js, ng2-charts Tagged , ,

injecting chart.js sparkline to jqxGrid widget in Angular with typescript

I am attempting to display a sparkline from an array of data coming from an internal API call. the data comes as an array of numbers, and import { Chart, registerables } from ‘chart.js’; Chart.register(…registerables); are imported. the columns for the grid are: public columns = [ {…}, { text: ‘Price Histiory’, datafield: ‘priceHistory’, outerHeight: […]

By deitz88
Published
Categorized as angular, chart.js, jqxgrid, jqxwidgets, typescript Tagged , , , ,

toDataURL() gives checkered background to downloaded chart

Hi im trying to save save image of chart. Im using Angular12, Chart.js for drawing charts. When I download it with toDataUrl() background in image is checkered[ https://i.stack.imgur.com/WYmBf.png ] here is my code in ts file public barChartLabels: Label[] = [‘Pon’, ‘Uto’, ‘Sri’, ‘Cet’, ‘Pet’, ‘Sub’, ‘Ned’]; public barChartType: ChartType = ‘bar’; public barChartLegend = […]

By ice wolf
Published
Categorized as angular, canvas, chart.js, charts, html Tagged , , , ,

Problem with displaying labels in ng2-charts using observable

I use the following code to put the data of my observable into my chartlabels. public barChartLabels: Label[] = []; public barChartData: ChartDataSets[] = [ { data: [3.9,5.6], label: ‘average’ }, ]; ngOnInit(): void…. this.tasks.pipe(map(t => t.map(t => t.name))).toPromise().then(names => this.barChartLabels.push(names)); I would expect each "names" to create their own label on my diagram. But […]

By Jonas960
Published
Categorized as angular, chart.js, ng2-charts Tagged , ,

TypeError: Cannot read properties of null (reading ‘length’) in AngularJs

I have this HTML code : <div ng-repeat="(k,v) in device"> <div class="panel-body m-5 p-5"> <canvas id="@{{ k }}"></canvas> </div> </div> And this is data in scope : $scope.device = [‘102′,’102′,’103′,’104′,’105′]; And I’m looping using "foreach" to display the graph according to the device : angular.forEach($scope.device, function(item, i) { $scope.ctx = document.getElementById(i); $scope.myChart = new Chart($scope.ctx, […]

By bengbeng
Published
Categorized as angularjs, chart.js, javascript Tagged , ,

angular create dinamically chart-line in same page rendere always last data value

i’ve crate a chart component and i want render it dinamically in other component into ng-for. The issue is that the chart render always last value for all chart. If i inspect the page, the canvas has correct value. I left a pastebin. Thank you. this is my code: //line-chart.config.ts import { CurrencyPipe } from […]

By David Papini
Published
Categorized as angular, canvas, chart.js, javascript, ngfor Tagged , , , ,
1 29

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq