Ngx-charts: Legend is unvisible when setting legend position to 'below' and unset view-attribute

Created on 14 Nov 2018  路  4Comments  路  Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

  • [x] bug report - search github for a similar issue or PR before submitting
  • [ ] feature request
  • [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
When setting legend position to 'below' and the chart should fit to container (no 'view'-attribute), the legend isnt visible. The chart uses the whole container height and the legend is invisible below the chart.
Does the height-calculation not take care of the legend height?

Expected behavior
The height should be correctly calculated.

Reproduction of the problem
set legendPosition to 'below' and set no 'view' attribute to fit the container

Please tell us about your environment:
Angular 7

  • ngx-charts version: 10.0.0

  • Angular version: 7.0.3

  • Browser: [latest stable Chrome]

  • Language: [TypeScript 3.1.1]

Most helpful comment

I'm also experiencing this, it is working correctly when the legend is at the 'right' position: it fits the parent container. But it's not fitting the parent container for 'below'

All 4 comments

I'm also experiencing this, it is working correctly when the legend is at the 'right' position: it fits the parent container. But it's not fitting the parent container for 'below'

Im having issues with this as well

Im experiencing a similar issue. It works in my dev build, but when i do a prod build using ng build --prod --aot, it gives the issue described above.

Below is a screenshot of the console errors i get when I hover over a section
image

I hope the error log may be useful

Hi. I'm having similar problems with the chart continuously resizing when legend is set below. Here is a stackblitz for reference:
https://ngx-chart-in-flex-c6sutq.stackblitz.io

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Hypercubed picture Hypercubed  路  3Comments

Jacquers picture Jacquers  路  3Comments

emeric0101 picture emeric0101  路  3Comments

merinshaji picture merinshaji  路  3Comments

achimha picture achimha  路  3Comments