Stack Overflow
Stack Overflow

Questions tagged [ngx-charts]

ngx-charts is a charting framework for Angular 2+. It uses d3.js for math functions, scales, axis and shape generators, etc and Angular to render and animate the SVG elements of a graph.

Declarative Charting Framework for Angular2 and beyond

gx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc

Resources

https://github.com/swimlane/ngx-charts

248 questions
0
votes
0 answers

Angular 12: ngx-charts-line-chart x axis plotting date data and ordering issue

I am using ngx-charts-line-chart of "@swimlane/ngx-charts": "^16.0.0" . I have following config.data that will render on line chart. [ { "name": "North East Region", "series": [ { "name": "2022-06-01", …
ganesh
  • 416
  • 1
  • 11
  • 32
0
votes
1 answer

groupBy based on range of values using RxJS in angular

I have a raw data array [ {bugid: b1 , state: 'foo', days: 2}, {bugid: b2, state: 'bar', days: 41}, {bugid: b3, state: 'foo', days: 45} ] I want to group this data using RxJS in this format { '0-25': [{ name: foo, value: 1}, {name: bar,…
confused_dude_13
  • 41
  • 6
0
votes
0 answers

How to prevent ion-row overlap legend when using ngx-chart with ion-grid?

I am using ngx-chart with ion-grid system like below. The chart and legend works fine, the main problem is chart's legend would ignore/ignored by ion-grid system and some how get overlaped. I want to prevent this from happening and ideally making…
AkiZukiLenn
  • 337
  • 3
  • 14
0
votes
0 answers

Transform time values when displaying ngx-charts-pie-grid

I want to display the share of times spent for x categories. The current pie chart looks like this. Category A Category B Category C 23 % 47 % 30 % Hours: 9.2 hours: 18.8 12 What I want to achieve instead is this view: Category…
kami
  • 1
  • 1
0
votes
0 answers

Angular 14: error NG8001: 'app-horizontal-bar-chart' is not a known element:

Can someone help me with this error? I have seen other possible solutions to solve this error but they have not worked. Error: src/app/pages/home/home.component.html:5:9 - error NG8001: 'app-horizontal-bar-chart' is not a known element: If…
Jesús de la Fuente
  • 1
0
votes
0 answers

How to change animations to charts

import { ViewEncapsulation, Component, Input, Output, EventEmitter } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; interface MergedData { color: string; name: string; value: number; }; interface…
javip97
  • 1
  • 1
0
votes
0 answers

Adding time-chart in ngx-chart

Is there a way to add on line-chart a values that will display points in chart in an unregular distances between them? For example, like on the picture below, I would like to add new points like "7,13 AM", "7,39 AM", "7,47 AM" and different values…
Żegota
  • 3
  • 2
0
votes
0 answers

ngx-charts - Line chart overlaps when i have single data and xAxisTicks defined #1789

I observed one issue with ngx-charts line chart, when i have single data point i.e [ { name: 'test', series: [ { name: 0, value: 0, }, ], }, ] Here is my html code: #yAxisTicks = [0,…
sachinkondana
  • 564
  • 5
  • 15
0
votes
0 answers

Swimlane Number-Card Title Wrap Text

I am trying to create a simple dashboard to show information at a glance. I am using the swimlane number card chart found here: https://swimlane.gitbook.io/ngx-charts/examples/number-card-chart. Everything is working but I can't get the title of a…
Jonald Monday
  • 156
  • 2
  • 13
0
votes
1 answer

How to align ngx charts created using ngfor

I want to align the ngx-charts component : Using ngFor on an array, I give the data to create charts, I am able to generate three charts, but I want to align them one in top left corner, one at bottom right and one at bottom left corner. HTML :
RonKing
  • 31
  • 3
0
votes
1 answer

overlapping text in NgxCharts legend

I placed an NGX-Charts advanced pie chart in my angular project (Angular Material installed) with default values, but legend text is ovelapping, I guess due to the roboto font used by Angular Material. Any ideas how to change ngxCharts legend font…
diacode
  • 181
  • 2
  • 6
0
votes
2 answers

How to have custom colors in ng2-charts and chart.js according to data?

I'm looking to build a line graph and mark all points above a certain value as red, and all those below that value as blue. I tried doing so with ngx-chart but that did not work. How do I do so with ng2-charts? Is that even possible? Any help would…
ritwick_ _D
  • 117
  • 1
  • 11
0
votes
0 answers

Ngx-charts: Line breaks after null value

Line chart breaks after null value as the title says. It plots line until point with value: null comes, after that only points are plotted but line isn't. I can fix this by manually changing null into 0 or NaN and it will be plotted as 0 or…
Gašper Štepec
  • 115
  • 1
  • 1
  • 7
0
votes
1 answer

error TS2322: Type "below" is not assignable to type 'LegendPosition'

I use ngx-charts API, in order to show data with a pie chart on my web app. When I tried modifying the chart's legend position, it showed the following error message: "error TS2322: Type '"below"' is not assignable to type 'LegendPosition'.". I am…
DGR
  • 422
  • 1
  • 4
  • 14
0
votes
1 answer

ngx-charts lines disappear when chart drawn in PrimeNG dialog that is closed and reopened

I am currently using PrimeNG for my typescript angular application. I am using the dialog component provided by PrimeNG to have a pop up that draws charts via ngx-charts (specifically ngx-charts-line-chart). When I first open the dialog the chart…
C McCoy
  • 11
  • 3
1 2 3
…
16 17