Add label in doughnutChart Data

3 replies · opened Apr 18, 2016

AangetkoutchiApr 18, 2016

Hello I need to add labels on the doughnut chart data. Can you please help me ? I sent you an example of what I would want to have. Thanks at all

SSemicolon WebSTAFFApr 19, 2016

Hello,

Custom Labels are currently not supported for the ChartJS Plugin.

Let us know if we can help you with anything else or if you find any further issues.

AangetkoutchiApr 19, 2016

it's strange !
On the website ChartJS Plugin http://www.chartjs.org/docs/#radar-chart-chart-options, I see this code for Pie & Doughnut Charts
But when i enter information label in my page label don't work and the chart disappear
if I can put the same label type its ok for me.

// And for a doughnut chart
var myDoughnutChart = new Chart(ctx[1]).Doughnut(data,options);
Data structure
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},

Yours

SSemicolon WebSTAFFApr 21, 2016

Hello,

The Default Labels can definitely be added but Radar Chart Options cannot be used for Pie & Doughnut Charts. Please find the following code in the charts.html File:

var doughnutChartData = [
	{
		value: 30,
		color:"#F7464A"
	},
	{
		value : 50,
		color : "#46BFBD"
	},
	{
		value : 100,
		color : "#FDB45C"
	},
	{
		value : 40,
		color : "#949FB1"
	},
	{
		value : 120,
		color : "#4D5360"
	}
];

and replace it with the following code to use the Default Labels:

var doughnutChartData = [
	{
		value: 30,
		color:"#F7464A",
		label: "Red"
	},
	{
		value : 50,
		color : "#46BFBD",
		label: "Green"
	},
	{
		value : 100,
		color : "#FDB45C",
		label: "Yellow"
	},
	{
		value : 40,
		color : "#949FB1",
		label: "Light Grey"
	},
	{
		value : 120,
		color : "#4D5360",
		label: "Dark Grey"
	}
];

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard