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
6
votes
0 answers

Custom timeline chart using ngx-charts and d3

Is there a detailed document how to make a custom ngx-chart? This is what I've found, but couldn't start working with: https://medium.com/@amcdnl/charts-with-svgs-in-angular2-1d08a0e635ea I want to create a custom timeline chart, something like…
Zsolt Tolvaly
  • 3,528
  • 4
  • 26
  • 25
5
votes
3 answers

Angular Type '{ domain: string[]; }' is not assignable to type 'string | Color'

I am using ngx-charts with Angular 12 and I'm getting this error message then I use this: colorScheme = { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }; The error message is: Type '{ domain: string[]; }' is not assignable to type 'string…
deszok
  • 95
  • 1
  • 10
5
votes
2 answers

How to highlight activeEntries in ngrx-charts

How to highlight activeEntries in ngrx-charts for a line chart. The documentation says: activeEntries object[] [] elements to highlight https://swimlane.gitbook.io/ngx-charts/examples/line-area-charts/line-chart However when i pass in an object…
Liam Clarke
  • 243
  • 4
  • 13
5
votes
4 answers

Using labelFormatting in ngx-chart pie

The pie chart in ngx-chart shows only the name of the data record as the label, but I want to also display its value in the label. I saw that it should be possible to change the label format with labelFormatting, but there is no example provided in…
Depa
  • 459
  • 8
  • 18
5
votes
0 answers

ngx chart resizing issue

Original screen, Hi I am able to stretch the chart and increase the width but as soon as I hit button to shrink the width to original state; the chart is not resized .Its still using the expanded dimension Above are screenshots of overlapping…
Mindtek
  • 114
  • 1
  • 11
5
votes
1 answer

Mark component as clientside only in angular universal

Using the ASPNet Angular SPA Template I'm attempting to import NGX-Charts but they don't work with server side pre-rendering. So I'm trying to make them render client side only by importing the NGX charts module into app.module.browser.ts. However…
gmn
  • 4,199
  • 4
  • 24
  • 46
5
votes
1 answer

Swimlane ngx-charts in Angular2 - Different styles on a single line chart

I have a single line chart, with dates on the X axis. After a certain date, I would like the line to be a different color. Is this possible using ngx-charts?
Abhishek
  • 1,974
  • 5
  • 31
  • 67
4
votes
2 answers

How to stop ngx-chart from adding decimal to x axis

I have created a chart using ngx-chart. The x-axis should populate year. My array of year currently has values: 2020, 2021,2022,2023. However when it is displayed in the chart, it automatically adds 2020.5, 2021.5, ... The value has to be number in…
avdeveloper
  • 449
  • 6
  • 30
4
votes
1 answer

ngx charts: Line chart define line width

I'm using ngxChart for a project, everything is fine, but I just find the line width very thin and I just can't figure out how to get it bigger. Any help?
Hadrien Delphin
  • 590
  • 1
  • 6
  • 19
4
votes
0 answers

Input property does not work within ngx-charts template

As per this answer I did come up with code below that works fine: result: any; ngOnInit() { this.result = getResult(); }
Sergino
  • 10,128
  • 30
  • 98
  • 159
4
votes
3 answers

Cannot read property 'toLocaleString' of undefined. Angular 5 ngx-charts

Console logCannot read property 'toLocaleString' of undefinedon my component.ts i am using this method to take the data from json getChartProducts() { this.TicketService.getAlladminPage(this.number, this.size, this.sort,…
Tzimpo
  • 964
  • 1
  • 9
  • 24
4
votes
1 answer

Angular4: *ngIf in not hiding element, instead creating duplicate elements in Internet explorer 11

I am facing issue using *ngIf to show different types of chart based on some flag. Its working in chrome but in IE11. *ngIf contents are getting added to DOM when flag is true, not getting deleted if flag is false. Because of this each time I toggle…
Vishwas HK
  • 58
  • 7
4
votes
3 answers

ngx-charts: set number of max. displayed labels/ticks on xAxis and prevent rotation

In a ngx-area-chart i want to set the max. displayed labels on the xAxis to 5. If i have only a few values this works as expected (left example), but with more data, the labels begin to rotate and it looks like the right example in this…
Tom
  • 41
  • 2
  • 3
4
votes
2 answers

Unable to Initialize ngx-charts with API fetched Data

I'm having some bad times while trying to initialize a chart built using ngx-charts with API fetched data. I built a rest api that, upon a proper call, spits out some time-series data. { "prices": [ { "item": "1", …
AndreaM16
  • 3,917
  • 4
  • 35
  • 74
3
votes
1 answer

Angular - ngx charts - how to show tooltip on command

I'm trying to create a custom legend component where each data entry has its own material progress bar. If any of the entries are hovered, I want the pie chart tooltip to be shown on the corresponding data entry. Here is my…
Manuel Brás
  • 413
  • 7
  • 21
1
2
3
…
16 17