Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Donut: Show percentage in the center #12

Closed
Julien-Delattre opened this issue Jun 23, 2019 · 2 comments
Closed

Donut: Show percentage in the center #12

Julien-Delattre opened this issue Jun 23, 2019 · 2 comments

Comments

@Julien-Delattre
Copy link

Regarding the donut chart, I would like to see the percentage in the center.
It seems that the only way to display the percentage is to enable the property "dataLabels".

In "morris.donut.coffee", the method "select" uses row.value instead of the calculated finalValue:
@setLabels(row.label, @options.formatter(row.value, row))

Any chance to get an option for that?

Below, a quick test. Please correct me if I'm mis-using it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue-morris examples</title>
    <link rel="stylesheet" href="https://pierresh.github.io/morris.js/css/morris.css" />
    <script src="https://pierresh.github.io/morris.js/js/morris.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
  </head>
  <body>
    <h1>Test showPercentage on Donut</h1>
    <div id="chart_donut"></div>
    <script>
      Morris.Donut({
        element: "chart_donut",
        showPercentage: true,
        dataLabels: true,
        data: [{ label: "Asia", value: 300 }, { label: "Europe", value: 250 }],
      });
    </script>
  </body>
</html>

Thanks for your great job by the way!
@pierresh
Copy link
Owner

Hello,

thanks for your message, I may add that option soon. The settings above look fine.

pierresh pushed a commit that referenced this issue Aug 10, 2019
Donut: Show percentage in the center
20d86d3 
#12
@pierresh
Copy link
Owner

Hello,

I just pushed a commit, now the value in the center would be the percentage of selected segment if the options showPercentage is set to true and dataLabels set to false.

Example:

    Morris.Donut({
      element: 'chart_test',
      showPercentage: true,
      dataLabels: false,
      data: [{ label: "Asia", value: 300 }, { label: "Europe", value: 250 }],
    });

Result:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pierresh @Julien-Delattre