Home › Forums › Chart Support › Removing doughnut label from chart populated from a CSV

Removing doughnut label from chart populated from a CSV

Viewing 3 posts - 1 through 3 (of 3 total)

Tagged: , ,

  • January 26, 2017 at 6:36 pm #14106

    jh87

    I have this chart that populates from Data.csv, however I’ve been unable to remove the labels without also removing the region from the tooltip. So – I want the Tooltip to read ‘UK: 3’ for example, but to have no labels. The code is:

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    $.ajax({
        type: "GET",
		startAngle: -90,
        url: "Data.csv",
        dataType: "text",
        success: function (data) { processData(data); }
    });
	
	

    function processData(allText) {
        var allLinesArray = allText.split('\n');
        if (allLinesArray.length > 0) {
            var dataPoints = [];
            for (var i = 0; i <= allLinesArray.length - 1; i++) {
	        var rowData = allLinesArray[i].split(',');
	        if(rowData && rowData.length > 1)
	            dataPoints.push({label: rowData[0], y: parseInt(rowData[1]) });
            }
            chart.options.data[0].dataPoints = dataPoints;
            chart.render();
        }
    }
	
            
    var chart = new CanvasJS.Chart("chartContainer", {

        theme: "theme2",
        data: [
        {
			
            type: "doughnut"	,	
			startAngle: -90,
            dataPoints: []
			
        },
        ]
    });
            
});
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

    Thank you!

    January 30, 2017 at 12:52 pm #14116

    Vishwas R

    @jh87,

    Are you looking for something like this?

    —
    Vishwas R

    January 30, 2017 at 2:12 pm #14120

    jh87

    Hi Vishwas,

    Thanks for your reply. I solved it by adding:

    indexLabel: "{null}",

    So all together:

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    $.ajax({
        type: "GET",
        url: "datapointsnumber.csv",
        dataType: "text",
        success: function (data) { processData(data); }
    });

    function processData(allText) {
        var allLinesArray = allText.split('\n');
        if (allLinesArray.length > 0) {
            var dataPoints = [];
            for (var i = 0; i <= allLinesArray.length - 1; i++) {
	        var rowData = allLinesArray[i].split(',');
	        if(rowData && rowData.length > 1)
	            dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) });
            }
            chart.options.data[0].dataPoints = dataPoints;
            chart.render();
        }
    }

            
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",
		indexLabelLineColor: "white",
        data: [
        {
            type: "doughnut",
			showInLegend: true, 
			indexLabel: "{null}",
			interval : 1,
            dataPoints: []
        }
        ]
    });
            
});
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Viewing 3 posts - 1 through 3 (of 3 total)

Tagged: , ,

You must be logged in to reply to this topic.