Leeroy Leeroy - 1 year ago 49
Javascript Question

ZingChart styling or removing pie chart label that comes from CSV

I have a ZingChart pie chart fed by an external CSV file. How do I hide the label on the pie chart? In the simulated code below it's that read entirely text appearing at the bottom.



var chartData = {
type: "pie",
csv: {
title: true,
dataString: "Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
rowSeparator: "_",
separator: "|",
mirrored: true,
horizontalLabels: true,
verticalLabels: true,
}
}

zingchart.render({
id: "chartDiv",
data: chartData,
});

<!DOCTYPE html>
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingchart/2.6.0/zingchart.min.js"></script>
</head>

<body>
<div id='chartDiv'></div>
</body>

</html>





The docs don't make it clear how to address those items (or they do... and it doesn't work).

Answer Source

We call those "items" valueBox's in our library. Every piece of text on the chart inherits from label and in this case, valueBox inherits from that as well. This means you can apply a pretty standard set of label manipulations to all pieces of text on the chart.

   "plot": {
      "valueBox": {
        "visible": false
      }
    }

Adversely, you can add multiple labels through a valueBox array. It can either be a single object or an array of objects. This would allow you to display multiple labels.

NOTE: the _ is a comment in JSON structure

     "_valueBox": [
        {
          type: 'all',
          placement: 'out',
          text: '%t'
        },
        {
          type: 'all',
          placement: 'in',
          text: '%v (%npv)'
        }    
      ]

Note: CSV legend is broken in v2.6.0. We have put a patch out at the following link.enter code here

    <script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>

All documentation referenced can be found here:

https://www.zingchart.com/docs/tutorials/chart-elements/value-boxes/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/value-box/

https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/

var myConfig = {
"graphset":[
    {
        "type":"pie",
        "csv":{
            "title":true,
            "separator":"|",
            "mirrored":true,
            "data-string":"Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
            "row-separator":"_",
            "horizontal-labels":true,
            "vertical-labels":true
        },
        "scale":{
           "visible":false
        },
        "plot": {
          "valueBox": {
            "visible": false
          },
          "_valueBox": [
            {
              type: 'all',
              placement: 'out',
              text: '%t'
            },
            {
              type: 'all',
              placement: 'in',
              text: '%v (%npv)'
            }    
          ]
        }
    }
],
"tween":null
};

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;
}
.zc-ref {
	display:none;
}
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download