search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Add ability to change advanced pie chart font size #516

Closed WesleyWaffles closed 5 years ago

WesleyWaffles commented 7 years ago

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

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior The advanced pie chart does not provide a way to change the size of the font that renders percentages and totals. Because of this, if you shrink the pie chart, the chart itself shrinks, but the text remains the same size, so you get some very odd mismatches between chart size and font size (e.g. tiny chart and huge font).

Expected behavior Ideally, changing the chart size using the view property would scale the font along with the chart, so the font size remains relative to the chart size.

Reproduction of the problem Go to the official docs here: https://swimlane.gitbooks.io/ngx-charts/content/charts/advanced-pie-chart.html

Change the view array values in app.ts from the default of [700, 400] to something like [700, 200] or [300, 400].

What is the motivation / use case for changing the behavior? The current behavior makes it difficult to scale this chart to smaller sizes, and that presents a visualization problem for some applications of the chart depending on website size, scale.

marjan-georgiev commented 7 years ago

You can override the font size, spacing, padding by css https://plnkr.co/edit/1JKS2CRy6EjL59JIqqCv?p=preview

marjan-georgiev commented 7 years ago

We may want to look into making the text sizes relative to the chart size.

BearandYoon commented 6 years ago

Hi @marjan-georgiev

I am using advanced-pie-chart in my project and it works well but I need to change the chart layout. https://stackblitz.com/edit/angular-k3wm1u As you can see in this example, pie-chart is very small than the legend section. I would like to make the pie chart bigger. I tried to change the width of advanced-pie class and .advanced-pie-legend-wrapper class but it doesn't work for me.

BearandYoon commented 6 years ago

Hi @marjan-georgiev

any updates?

marjan-georgiev commented 6 years ago

@BearandYoon take a look at the changes I made:

https://stackblitz.com/edit/angular-tnctpx?file=app/table/table.component.scss

You shouldn't change the chart element's size, but the size of its container. I moved the pie-chart-container class to a div that wraps the chart, and added min-width to it.

SkanderLassoued09 commented 2 years ago

How can i modify the css ngx admin