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>


Show source
| javascript   | html   | graph   | zingchart   | charts   2016-11-25 18:11 1 Answers

Answers to How to hide the 0% label in zingchart pie charts ( 1 )

  1. 2016-11-28 19:11

    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>

Leave a reply to - How to hide the 0% label in zingchart pie charts

◀ Go back