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.

Answer 1

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;
}

after the solution

for me, works fine.

Answer 2

Result

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;
}