How to make the "advanced pie chart" in ngx charts in angular2 vertically?

Question

i'm new in angular js I used to customize the style in css easily but here I couldn't

i'm using ngx-charts "advanced pie chart" and I need to make the results vertically how can I do this ?

for example the attachment here

shows the results horizontally but my div has small width and large height so I need to move the results to be below the circle chart.

Thank you.

I have a question about display of the advanced-pie-chart on ipad. are the chart values is Nan ? — mohamed zerdan, Oct 08 '19 at 14:50

renearaujo · Accepted Answer · 2018-08-08T19:56:46.503

3

I had the same problem. In your styles.css (or styles.scss), put this code:

.advanced-pie-legend .legend-items-container .legend-items {
  overflow: initial !important;
}

for me, works fine.

edited Aug 08 '18 at 19:56

answered Aug 08 '18 at 13:43

renearaujo

score 0 · Answer 2 · answered Nov 22 '18 at 02:36

Use display variable to control. Add this code in your css style file.

.advanced-pie-legend .legend-items-container .legend-items .legend-item {
    display: inherit !important;
}

Add if you seem the result area is too big. You can control it at this.

.advanced-pie-legend {
    width: 15rem !important;
}

2 Answers2