How to hide the 0% label in zingchart pie charts

Question

I'm using zingchart and when I do a Pie Chart if theres a slice that have zero it shows a 0% label over the chart example:

if I have the following categories A: 40 B: 60 C: 0

This would display a pie chart where a 60% Label would be displayed over the option B and a 40% label would be displayed over the option A, but this also would display a 0% label in the middle of the chart.

If is possible to not show the label if the value is 0%

here is my configuration

globals: {
shadow: false,
    fontFamily: "Verdana",
    fontWeight: "100"
    },
    type: "pie",
    backgroundColor: "#fff",
    legend: {
    align: 'right',
            verticalAlign: 'middle',
            toggleAction: 'remove',
            maxItems: 8,
            overflow: 'scroll',
            scroll: {
            bar: {
            backgroundColor: '#bbff33 #99e600',
                    borderLeft: '1px solid #88cc00'
            },
                    handle: {
                    backgroundColor: '#66cc66',
                            borderLeft: '1px solid #339933',
                            borderRight: '1px solid #339933',
                            borderTop: '1px solid #339933',
                            borderBottom: '1px solid #339933',
                            borderRadius: '2px'
                    }
            },
            borderWidth: 1,
            borderColor: '#88cc00',
            borderRadius: '3px',
            marker: {
            type: 'circle'
            },
            mediaRules: [
            {
            maxWidth: 500,
                    item: {
                    fontSize: 10
                    },
                    scroll: {
                    bar: {
                    backgroundColor: '#e6f0ff #99c2ff',
                            borderLeft: '1px solid #0066ff'
                    },
                            handle: {
                            backgroundColor: '#99ccff',
                                    borderLeft: '1px solid #3399ff',
                                    borderRight: '1px solid #3399ff',
                                    borderTop: '1px solid #3399ff',
                                    borderBottom: '1px solid #3399ff',
                                    borderRadius: '2px'
                            }
                    },
                    borderColor: '#0066ff',
                    marker: {
                    size: 4
                    }
            },
            {
            maxWidth: 300,
                    maxItems: 6,
                    item: {
                    fontSize: 9,
                            margin: 1
                    },
                    scroll: {
                    bar: {
                    width: '50%',
                            backgroundColor: '#e6e6ff #b3b3ff',
                            borderLeft: '1px solid #9999ff'
                    },
                            handle: {
                            width: '50%',
                                    backgroundColor: '#cc99ff',
                                    borderLeft: '1px solid #9933ff',
                                    borderRight: '1px solid #9933ff',
                                    borderTop: '1px solid #9933ff',
                                    borderBottom: '1px solid #9933ff',
                                    borderRadius: '2px'
                            }
                    },
                    borderColor: '#9999ff',
                    marker: {
                    size: 3
                    }
            }
            ]
    },
    tooltip: {
    text: "%t"
    },
    plot: {
    refAngle: "-90",
            borderWidth: "0px",
            valueBox: {
            placement: "in",
                    text: "%npv %",
                    fontSize: "15px",
                    textAlpha: 1,
            }
    },
    series: [{
    text: "(" + 40 + ") A ",
            values: [d.soporte],

            backgroundColor: "#004d99"

    }, {
    text: "(" + 60 + ") B ",

            values: [d.estudio],

            backgroundColor: "#808000"
    }, {
    text: "(" + 0 + ") C ",

            values: [0],

            backgroundColor: "#cc6600"
    }]

var myConfig = {
  globals: {
    shadow: false,
    fontFamily: "Verdana",
    fontWeight: "100"
  },
  type: "pie",
  backgroundColor: "#fff",
  legend: {
    align: 'right',
    verticalAlign: 'middle',
    toggleAction: 'remove',
    maxItems: 8,
    overflow: 'scroll',
    scroll: {
      bar: {
        backgroundColor: '#bbff33 #99e600',
        borderLeft: '1px solid #88cc00'
      },
      handle: {
        backgroundColor: '#66cc66',
        borderLeft: '1px solid #339933',
        borderRight: '1px solid #339933',
        borderTop: '1px solid #339933',
        borderBottom: '1px solid #339933',
        borderRadius: '2px'
      }
    },
    borderWidth: 1,
    borderColor: '#88cc00',
    borderRadius: '3px',
    marker: {
      type: 'circle'
    },
    mediaRules: [
      {
        maxWidth: 500,
        item: {
          fontSize: 10
        },
        scroll: {
          bar: {
            backgroundColor: '#e6f0ff #99c2ff',
            borderLeft: '1px solid #0066ff'
          },
          handle: {
            backgroundColor: '#99ccff',
            borderLeft: '1px solid #3399ff',
            borderRight: '1px solid #3399ff',
            borderTop: '1px solid #3399ff',
            borderBottom: '1px solid #3399ff',
            borderRadius: '2px'
          }
        },
        borderColor: '#0066ff',
        marker: {
          size: 4
        }
      },
      {
        maxWidth: 300,
        maxItems: 6,
        item: {
          fontSize: 9,
          margin: 1
        },
        scroll: {
          bar: {
            width: '50%',
            backgroundColor: '#e6e6ff #b3b3ff',
            borderLeft: '1px solid #9999ff'
          },
          handle: {
            width: '50%',
            backgroundColor: '#cc99ff',
            borderLeft: '1px solid #9933ff',
            borderRight: '1px solid #9933ff',
            borderTop: '1px solid #9933ff',
            borderBottom: '1px solid #9933ff',
            borderRadius: '2px'
          }
        },
        borderColor: '#9999ff',
        marker: {
          size: 3
        }
      }
    ]
    },
    tooltip: {
      text: "%t"
    },
    plot: {
    refAngle: "-90",
      borderWidth: "0px",
      valueBox: {
        placement: "in",
        text: "%npv %",
        fontSize: "15px",
        textAlpha: 1,
      }
    },
    series: [{
    text: "(" + 40 + ") A ",
            values: [40],

            backgroundColor: "#004d99"

    }, {
    text: "(" + 60 + ") B ",

            values: [60],

            backgroundColor: "#808000"
    }, {
    text: "(" + 0 + ") C ",

            values: [0],

            backgroundColor: "#cc6600"
    }]
 }

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= 'https://demos-stage.zingchart.com/zingchart/zingchart.min.js'></script>
		<script> ZC.MODULESDIR = '//demos-stage.zingchart.com/zingchart/modules/';</script>
</head>
	<body>
	  <div id="myChart"></div>
	</body>
</html>

Answer 1

This can easily be alleviated. In the ZingChart library this is an attribute called rules. This is most similar to if statements. So if value == 0 display text:'' (blank text)

valueBox: {
  ...
  rules: [
    {
       rule: '%v === 0',
       text: ''
    }
 ]

rules docs

tokens doc. This is where the %v comes from.

var myConfig = {
  globals: {
    shadow: false,
    fontFamily: "Verdana",
    fontWeight: "100"
  },
  type: "pie",
  backgroundColor: "#fff",
  legend: {
    align: 'right',
    verticalAlign: 'middle',
    toggleAction: 'remove',
    maxItems: 8,
    overflow: 'scroll',
    scroll: {
      bar: {
        backgroundColor: '#bbff33 #99e600',
        borderLeft: '1px solid #88cc00'
      },
      handle: {
        backgroundColor: '#66cc66',
        borderLeft: '1px solid #339933',
        borderRight: '1px solid #339933',
        borderTop: '1px solid #339933',
        borderBottom: '1px solid #339933',
        borderRadius: '2px'
      }
    },
    borderWidth: 1,
    borderColor: '#88cc00',
    borderRadius: '3px',
    marker: {
      type: 'circle'
    },
    mediaRules: [
      {
        maxWidth: 500,
        item: {
          fontSize: 10
        },
        scroll: {
          bar: {
            backgroundColor: '#e6f0ff #99c2ff',
            borderLeft: '1px solid #0066ff'
          },
          handle: {
            backgroundColor: '#99ccff',
            borderLeft: '1px solid #3399ff',
            borderRight: '1px solid #3399ff',
            borderTop: '1px solid #3399ff',
            borderBottom: '1px solid #3399ff',
            borderRadius: '2px'
          }
        },
        borderColor: '#0066ff',
        marker: {
          size: 4
        }
      },
      {
        maxWidth: 300,
        maxItems: 6,
        item: {
          fontSize: 9,
          margin: 1
        },
        scroll: {
          bar: {
            width: '50%',
            backgroundColor: '#e6e6ff #b3b3ff',
            borderLeft: '1px solid #9999ff'
          },
          handle: {
            width: '50%',
            backgroundColor: '#cc99ff',
            borderLeft: '1px solid #9933ff',
            borderRight: '1px solid #9933ff',
            borderTop: '1px solid #9933ff',
            borderBottom: '1px solid #9933ff',
            borderRadius: '2px'
          }
        },
        borderColor: '#9999ff',
        marker: {
          size: 3
        }
      }
    ]
    },
    tooltip: {
      text: "%t"
    },
    plot: {
      refAngle: "-90",
      borderWidth: "0px",
      valueBox: {
        placement: "in",
        text: "%npv %",
        fontSize: "15px",
        textAlpha: 1,
        rules: [
          {
            rule: '%v === 0',
            text: ''
          }  
        ]
      }
    },
    series: [{
    text: "(" + 40 + ") A ",
            values: [40],

            backgroundColor: "#004d99"

    }, {
    text: "(" + 60 + ") B ",

            values: [60],

            backgroundColor: "#808000"
    }, {
    text: "(" + 0 + ") C ",

            values: [0],

            backgroundColor: "#cc6600"
    }]
 }

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>