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

PieChart Border #1155

Open DatL4g opened 5 years ago

DatL4g commented 5 years ago

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

Current behavior

Add a feature to display a border around the pie chart, so it looks like its circled (optional). Current way is to surrend it with a div and give it a class with border-styles, but the div doesn't auto-size so you have to define the height and width by yourself and if your chart has view parameters 150x150, the div width and height needs to be something like 150 - 155

Expected behavior

The circle around the pie-chart would have the right width and height. Because of that it would look better overall.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Looks better when e.g.: -2 slices, first color: red, second color: transparent So you only see one slice and its a bit confusing.

Please tell us about your environment:

Windows10 Visual Studio Yarn localhost:4200

KingDarBoja commented 5 years ago

Hello @DATL4G,

Do you mean something like the image below?

pie-chart-border

@marjan-georgiev What do you think about this feature?

marjan-georgiev commented 5 years ago

It's an interesting idea, but we need to consider all the configurations of the pie chart (i.e. doughut, explode slices, etc.) If we want to support all of these cases, a single circle wouldn't be enough. Each pie slice would need to have a slightly bigger element behind it, but we can't put it in the pie component because it would overlap other slices. We would need to add a second pie-series.

KingDarBoja commented 5 years ago

You are right, just tested this simple border feature with the explode slices and the result is not great as one should expect. Probably the better approach would be either the second pie-series which would impact the performance of rendering the chart or simply put the border for each slice. The last one is a bit ugly in the sense of having internal borders between each slice gap but who knows, some users would like that too...

DatL4g commented 5 years ago

I'm glad to hear you might want to implement that.

To the picture: I would leave a little space between the circle and the chart, but I would also be satisfied without the spacing