You must be logged in to post your query.
Home › Forums › Chart Support › Removing doughnut label from chart populated from a CSV
Tagged: csv, label, Tool tip
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!
@jh87,
Are you looking for something like this?
— Vishwas R
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>
You must be logged in to reply to this topic. Login/Register