Home forums Report Bugs Issue with Pie chart label lines

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Manoj Mohan 1 week, 3 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27299

    Hi, just had a Skype discussion with Shashi Ranjan and was advised to raise a support ticket.

    We are experiencing an issue with pie chart labels overlapping the lines, in a full screen Electron app.

    Please download this sample app from https://www.dropbox.com/s/hnke7r9alg5vsb6/electron-pie.zip?dl=1

    If you run npm install and npm start then 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.

    Thanks
    Alex Bowyer

    #27321

    Alex,

    Setting the width and height of the chart-container-left (div) should work fine in your case. Please take a look at this updated project.

    —-
    Manoj Mohan
    Team CanvasJShan
    Team CanvasJS

    #27343

    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 2 weeks ago by  mortenlau.
    • This reply was modified 2 weeks ago by  mortenlau.
    #27346

    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.

    Example of display issue

    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 2 weeks ago by  mortenlau.
    #27366

    @mortenlau,

    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.

    To make the chart responsive, the chart is re-rendered when the window is resized with the updated size of the container. And upon resize of the chart, labels/indexLabels of the chart are readjusted to avoid overlapping.

    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.

    Sorry, we are unable to reproduce the issue at our end. Can you kindly share steps to reproduce the issue? Meanwhile you can try re-rendering the chart on changing the view to fullscreen, which might fix the issue in this case.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.