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
3
votes
1 answer

Generate a combo chart using ngx-charts

I need a combo chart between Stacked Bar Char and Line Bar Chart could you help me with some example. I was reading this doc: Demo for combo charts But I can't understand the example.
Frank Corona Prendes
  • 81
  • 1
  • 3
  • 10
3
votes
1 answer

How do you add a $ in front of the value for the y-axis using ngx-charts

I have a question related to Angular and TypeScript, using https://swimlane.gitbooks.io/ngx-charts/content/charts/bar-vertical.html I am trying to let the y-axis to be = $100, $200, $300 but if I set $ + a number it returns an error Error: …
Oscar Ricaud
  • 33
  • 3
3
votes
0 answers

Ngx-charts: draw non continuous line chart

Is there a native way with ngx-charts to draw non-continuous line chart ? I'm using the normal "line chart" but cannot find a way to achieve this (to those who wonder: no I cannot simply put "0" as value). Same question for vertical stacked bar…
Valentin Coudert
  • 1,759
  • 3
  • 19
  • 44
3
votes
0 answers

How to remove unused space in ngx-charts?

I have a table where some of the cells contain an ngx-chart: As you can see on the picture, there is some space between the line and the cell border on each side. Is it possible to remove this space so the cell's size gets reduced? HTML: …
Jesper
  • 2,644
  • 4
  • 30
  • 65
2
votes
1 answer

Is there a way to show the line's total value on the legend of the Ngx Line Chart?

If I set the total values to name attribute like this: "name": "Germany: 1234" it also shows up on the line like this: I want total value to only show up on the legend: This is the structure of data: export var lineChartMulti = [ …
Ozan
  • 85
  • 1
  • 5
2
votes
1 answer

ngx pie chart not showing chart in the browser in Angular app

I have been trying to display a chart in my angular app but for some reason it is not displaying in the browser. My package.json looks like this. "dependencies": { "@angular/animations": "~13.1.1", "@angular/common": "~13.1.1", …
LoneWolf
  • 119
  • 1
  • 11
2
votes
1 answer

how to set tooltip on ngx-charts in angular

I have a series of graphs to be displayed. I am dynamically generating these graphs using below code with in a for loop.
VIRIYALA NARESH
  • 187
  • 1
  • 4
  • 17
2
votes
1 answer

ngx-charts -> ngx-charts-bar-vertical xAxis labels multi line

I'm using 'ngx-charts' with Angular, on My X axis labels i have long text. how can i make it wrap on a couple of lines instead of using 3 dots when text overflows? Update: tried to add xAxisTickFormating func : html…
Alex
  • 21
  • 4
2
votes
1 answer

swimlane ngx-charts Angular 9, Enable vertical bar chart ability to show and hover over zero (0) values in v11.2.0+ (was available in v11.1.0)

It appears that between @swimlane/ngx-charts v11.1.0 and v11.2.0, the ability to display and hover over a vertical bar chart's 0 values was removed. Is it possible to re-enable the ability to see and hover over the bars with a value of 0 in…
aspergillusOryzae
  • 746
  • 2
  • 9
  • 25
2
votes
2 answers

How to dynamically populate an array in Typescript for ngx chart?

I am using ngx chart library to display a barchart. It works fine when I use a static array but when I try to populate it dynamically, it does not work. Below are my codes: Note: allProducts is an array returned from API with a list of itemName,…
avdeveloper
  • 449
  • 6
  • 30
2
votes
0 answers

Error: attribute d: Expected number, "…521739130434781,NaNL60.739130434…". at platform-browser.js:1151

I have to draw a line graph for a project. I based my graph on the example provided at https://stackblitz.com/edit/swimlane-line-chart?embed=1&file=app/app.component.ts i got the example to work and transformed my data to refelct the necessary…
Nephtys
  • 21
  • 3
2
votes
2 answers

Error importing ngx-charts to Angular as separate component: error NG8001: 'ngx-charts-tree-map' is not a known element

I have imported ngx-charts in the way suggested in this link: https://stackblitz.com/edit/swimlane-tree-map-chart?embed=1&file=app/app.component.ts However, I'd ideally like to have each chart as a separate component if I can, so I have added it as…
Kickergold
  • 59
  • 2
  • 9
2
votes
1 answer

using ngx-charts and loading data from an observable

So I'm trying to make a simple bar chart like this one (see documentation). I'm getting my data from an observable and trying to run change detection in the subscription because the data isn't showing up in the chart, but change detection isn't…
Peter Weeks
  • 291
  • 2
  • 16
2
votes
2 answers

Modifying the inner CSS of ngx-charts

When I spun up the ngx-charts Advanced Pie Chart example, my legend's numbers get cut off. Digging into the CSS, this seems to be because of a margin-top being set to -6px: After experimenting in the browser, I've found that 10px makes things look…
scohe001
  • 15,110
  • 2
  • 31
  • 51
2
votes
1 answer

ngx-charts - Horizontal Bar Charts bar thickness changes on data update

I'm using Angular and ngx-charts to show some data that is pulled from the server. On first load, when the ngOnInit() method triggers the request to the server (getStats()), everything is loaded as it should: But when the Get Data button is…
mighty_mike
  • 714
  • 7
  • 19
1 2 3
…
16 17