40
Views
4
Comments
Set minimun percentage in Pie CHart
Service Studio Version
11.54.61 (Build 63317)

Hi, I have this Pie Chart in my project:


My problem is than the slice of "Closed Won" i can´t see this slice. My question is if anybody have an idea about how to fix it and if there is any option to force that values less than 5000 (example) or value equal 0, force the slice to a percentage and show this part.


Thanks a lot

2021-11-12 04-59-31
Manikandan Sambasivam

In OutSystems, when working with pie charts, especially when slices are too small, they might not be visible or easily distinguishable. Here are a few ways to address this issue and ensure that all slices are visible:

1. Customize the Pie Chart to Show Small Slices

You can customize the Highcharts configuration (which OutSystems uses for its charts) to ensure that small slices are displayed. One approach is to use the dataLabels and tooltip options to ensure small slices are highlighted.

2. Set a Minimum Size for Pie Slices

Highcharts allows you to set a minimum size for pie slices. You can configure this in the advanced format of the chart options.

3. Combine Small Slices into a Single Slice

If you have multiple small slices, you might want to combine them into a single "Others" slice for better visibility.

Implementing the Solution

Step-by-Step Guide

  1. Customize Chart Options:

    • Go to the pie chart widget in your OutSystems project.
    • Open the "Advanced Format" property.
  2. Add the Configuration for Small Slices:

    • Use the following JSON configuration to customize your pie chart:
    • {  "chart": {
          "type": "pie"
        },
        "plotOptions": {
          "pie": {
            "dataLabels": {
              "enabled": true,
              "format": "{point.name}: {point.y:.2f}%"
            },
            "showInLegend": true,
            "size": '100%',
            "minSize": 5, // This ensures that small slices are visible
            "dataLabels": {
              "distance": -30, // Adjust as necessary
              "formatter": function() {
                if (this.y > 0) {
                  return this.point.name + ': ' + this.y + '%';
                }
                return null;
              }
            }
          }
        },
        "tooltip": {
          "pointFormat": '{series.name}: {point.percentage:.1f}%'
        }
      }
  3. Add the Data:
    • Ensure that your data includes all slices, even those with very small values.
  4. Combine Small Slices (if needed):
    • If you want to combine small slices, you can preprocess your data in OutSystems before binding it to the chart.
UserImage.jpg
David Béjar

Hi Manikandan This is my Json:



 Where I should include it?

2024-05-14 06-49-08
Karnika-EONE

Hi @David Bejar

1.You need to take dependency on Piechart_v1 of outsystemcharts.

2.In that Chart you able to find advancedformat Property>>HighchatJSOn.

3.You able add your Custom JS code.

Hope it helps

Best Regards

Thanks

Karnika.K.

2021-11-12 04-59-31
Manikandan Sambasivam

 set these options directly in the chart json . 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.