[mortenlau]

Hi, (Please note I am Alex Bowyer, the developer, not Morten Lau the account holder/client).

Thank you for your message.
I don’t think you have understood the problem. I do not want to change the size of the chart.
The issue is not to do with the edges of the screen or the amount of room.

The issue is the overlapping of certain pie label lines with the text in the labels themselves – it happens in a variety of pie charts, but only in the Electron browser runtime. See this screenshot: https://i.imgur.com/TCEcZdi.png

Have you tried following my steps to reproduce? It will only be visible if you follow those steps.

Thanks – I need a solution to this bug that will work for any pie chart as this is in a program that generates pie charts from varying user data.

Look forward to hearing from you.
Thanks
Alex Bowyer, Developer for Morten Lau

[mortenlau]

Hi. I am afraid this remains an issue for me, even using your latest codebase. We are experiencing an issue with pie chart labels overlapping the lines, in a full screen Electron app.

To reproduce this issue, it’s important to understand that the issue is only occurring when viewing the page within the Electron browser runtime, not a standard web browser. To reproduce, please follow these steps exactly:

1. Please download this sample app from https://www.dropbox.com/s/hnke7r9alg5vsb6/electron-pie.zip?dl=1
2. Unzip it.
3. Ensure you have npm and node installed. See https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
4. in command prompt, cd to the unzipped directory.
5. Run npm install
6. Run npm start
7. Click the full screen button. You should see the issue.

I need a way to fix this so that the text is not overlapping (and ideally would like a tiny bit of space between text label and line end as well).

Please note the point of contact for this query is myself Alex Bowyer the developer (alex.bowyer at googlemail.com) not the account owner/my client Morten Lau.

[mortenlau]

Hi. I am afraid this remains an issue for me, even using your latest codebase. We are experiencing an issue with pie chart labels overlapping the lines, in a full screen Electron app.

To reproduce this issue, it’s important to understand that the issue is only occurring when viewing the page within the Electron browser runtime, not a standard web browser. To reproduce, please follow these steps exactly:

1. Please download this sample app from https://www.dropbox.com/s/hnke7r9alg5vsb6/electron-pie.zip?dl=1
2. Unzip it.
3. Ensure you have npm and node installed. See https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
4. in command prompt, cd to the unzipped directory.
5. Run npm install
6. Run npm start
7. Click the full screen button. You should see the issue.

I need a way to fix this so that the text is not overlapping (and ideally would like a tiny bit of space between text label and line end as well).

Please note the point of contact for this query is myself Alex Bowyer the developer (alex.bowyer at googlemail.com) not the account owner/my client Morten Lau.

[mortenlau]

Actually your proposed workaround works for this specific chart but not for others. In the following example, your setting of width 50% and height 300px still results in label display issues. I need a solution that will reliably work regardless of the pie chart size and screen size – the data varies, so the screen layout varies.

This still seems like a bug to me – the position of the label should be positioned relative to the end of the line, not the size of the containing div.

• This reply was modified 4 years, 5 months ago by mortenlau.

[mortenlau]

Thank you. Could you explain how these width and height values are used by your algorithm ie. how is it that this fixes the problem? I have to cope with varying screen sizes in this application so I will need to understand exactly how to dynamically derive those values to be ones that work. Understanding what it is about those values that makes the labels display correctly will help.

Thanks, Alex.

Also do you understand why this behaves differently in the electron project than the jsfiddle, even with the same code?

• This reply was modified 4 years, 5 months ago by mortenlau.
• This reply was modified 4 years, 5 months ago by mortenlau.