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
36
votes
3 answers

How can I make my ngx-line-chart responsive?

I'm using ngx-admin and I'm trying to make my ngx-line-chart responsive. My chart is in a nb-card, and when I resize the window the nb-card is totaly responsive. So I want my chart to be resized to fit inside the nb-card. My html code:
Loufi
  • 1,215
  • 1
  • 8
  • 23
20
votes
3 answers

Custom tooltip contents @ ngx-charts | Angular2+ | TypeScript

I've been trying to set a custom label in a line chart's tooltip , e.g., modified number of minutes in HH:mm format (74 min --> 1:14), for quite some time now, but unfortunately without any success. Displaying the value as 1.283(...3) is not an…
odjov
  • 213
  • 1
  • 2
  • 5
15
votes
5 answers

Angular ngx-charts options for customizing the Legend?

I am currently using ngx-charts for Angular2, and I would like to customize some legends, e.g. place the legend below the chart, or rename the legend fields, or make the legend wider (parts of the text just gets cut off..) etc. Are there any good…
MMM
  • 287
  • 1
  • 5
  • 17
11
votes
2 answers

ngx-charts-bar-vertical: what to do when there are too many elements and bars are not drew

Using ngx-charts, and particularly the vertical bar chart, I have found that there's a limit of elements over which the bars won't be displayed. I believe the limit is related to the chart's available width and the number of elements, which of…
qwertoyo
  • 1,332
  • 2
  • 15
  • 31
10
votes
2 answers

How to change xAxisTickFormatting in ngx-charts-line-chart based on timeline selection?

By default, ticks are formatted based on time range selection in timeline. If it pans across days it shows month and if it is with in a day, it shows only time. This is great! Now I want to localize these ticks. I could provide xAxisTickFormatting…
gerin
  • 392
  • 1
  • 3
  • 11
10
votes
4 answers

ngx-chart error "TypeError: Object(...) is not a function"

I am trying to implements some statistics in my develepping platform and I try to use ngx-charts to display them. However I get an error and I can't figure out why. I am using storedProcedures for MySQL statistics which I call from Java Restful…
mixtou
  • 729
  • 10
  • 27
10
votes
5 answers

NgxCharts resizing on data change

I'm building an app using Swimlane's Ngx Charts for graphical data representation, but I'm getting odd behaviour when I update the data via a refresh button which re-calls a GET function to update the data array. I'm using @angular/flex-layout for a…
Matt Brewerton
  • 866
  • 1
  • 6
  • 23
9
votes
4 answers

How to format the x-axis and y axis label colors in a ngx-charts line chart

I am using ngx-charts for plotting time series data. I am using their example
Niranjan
  • 517
  • 2
  • 4
  • 21
7
votes
0 answers

ngx-charts-line-chart failing with Cannot read property 'getColor' of undefined

I'm setting up a simple example of the line chart and it fails with the getColor on undefined error. If I remove the [results] data, the chart displays but then fails on missing data. Not sure how to track this problem down? Using ngx-charts…
Dave B
  • 101
  • 1
  • 7
7
votes
1 answer

In ngx-Charts, How to make tooltips always appear? Instead of appear on mouse-over and then disappear?

I am trying to build the stacked bar graph using ngx-charts in angular 4.x. While displaying the data labels, I am using tooltip template and able to display, but I want those labels to show up always (instead on only on mouse-over). How I can…
Ajay
  • 746
  • 1
  • 10
  • 25
6
votes
3 answers

ngx-charts line chart, how to show the line chart with dot for the data point all the time

for ngx-charts line chart, it show the line chart, but there is no dot for the data point. If you hover the data point, it show a dot for the data pint and also with a label tooltip. I like to have the line chart to show all the data point with a…
Steve
  • 256
  • 5
  • 12
6
votes
4 answers

Change default colors set on Angular ngx-charts

I'm working on an angular app and using ngx-charts, after debugging and searching online for few moments I couldn't find how to change the color palette on the charts. The default angular color palette looks like the following: Do you guys know…
DevMachine
  • 553
  • 3
  • 6
  • 15
6
votes
0 answers

ngx-charts timeline: get selected period

When using the timeline feature in ngx-charts and selecting a range in order to zoom in, is there a way (a callback or event listener) that can return the subset of data or period that you are looking at? I basically have a table and a graph…
M_M
  • 71
  • 2
  • 5
6
votes
5 answers

How to use Ngx-Charts customColor function

How do you use the customColor attribute as a function? I'm looking to build a scatter plot and mark all points with a negative value as red, and all those with a positive value as green. I would think that the customColor functionality would let me…
K Gardner
  • 61
  • 1
  • 3
6
votes
2 answers

ngx chart data with pipe

I am using a filter pipe with the ngx-charts data array. The data is filtered by 2 dates: fromDate and toDate. The pipe is working fine when filtering with dates that make the array smaller, but when I filter first with a smaller date-range and then…
Max R.
  • 1,574
  • 2
  • 12
  • 27
1
2 3
…
16 17