Ngx-charts: Charts don't work with bootstrap grid system

[martijnhiemstra]

I am using bootstrap for it's great grid system. I have a page with 2 div's each set to col-xl-6 which means on desktop systems each div is next to each other (Kind of float left / float right idea).

The charts being generated for some reason float on the left with means that the chart is on the left and not in the right container. Can this be fixed?

[marjan-georgiev]

Please provide a stackblitz where this problem can be seen and reproduced.

[martijnhiemstra]

I have put an example online:
https://stackblitz.com/edit/angular-txsrla

As you can see the legends don't align either. Each graph should have it's own container so that these kind of alignment errors don't occure.

[martijnhiemstra]

I think you guys really need to go back to the drawing board. I am now using a advanced pie chart and if I don't set the view, because I want the pie chart to be as wide as the container, then the pie chart looks really messed up. Also reload of the pie chart is impossible. I update the values in the pie chart after a observable call and nothing happens.

[marjan-georgiev]

Ok, a few things:

1. You are not even using bootstrap in that stackblitz example. You have added the classes, but the bootstrap css is not loaded anywhere.
2. You are setting the view input on the chart. If you want your chart to be as wide as the container, you need to leave that input undefined.
3. The results input of the chart is immutable. You need to pass a new array in order for the chart to be updated, not modify the old one.
4. All of the above is in the documentation, or in existing github issues. Please refer to it and do a simple search before opening a new issue.
5. If you do decide to open a github issue, please fill out the form properly. It would save us a lot of time trying to figure out what the problem is.

Here's a stackblitz with loaded bootstrap and a properly configured chart: https://stackblitz.com/edit/angular-mqcn7n?file=app/table/table.component.ts

[martijnhiemstra]

Oke, thanks for your feedback and your time.

I have some feedback about the view. If you remove the [view]="view" line you will see what I mean.

Also I have now added the bootstrap cdn and now bootstrap is working. The pie chart still isn't aligning to the right.

[ClarenceR89]

@martijnhiemstra

You are using bootstrap 4 which uses col-* notation for the smallest breakpoint but you never defined that breakpoint.

your containing div should also either be a bootstrap row or d-flex

I have successfully used ngx-charts with bootstrap 4 in my application.

[ClarenceR89]

@martijnhiemstra

here is an updated stackblitz

https://angular-gcuzrk.stackblitz.io

[janstadt]

Here's an example of the lib not working with bootstrap cards: https://stackblitz.com/edit/angular-1t2oom
essentially any parent element that is a flex box doesnt seem to work. Looks related to https://github.com/swimlane/ngx-charts/issues/1248