Chartjs-Charts.js won't show legend and on chart descriptions

by

0👍

✅

You can change the tooltip template to show both label and value. By default that is the behavior so either remove the tooltip from options are change it to something like the snippet.

In your second example you create options but you never add it to the chart. Thats why you see both label and value. (default look)

This means if label is present put label:value so camping:20 and if label is not there just use 20. 

<%if (label){%><%=label %>: <%}%><%= value + %>

 jQuery(window).load( function() {
	var doughnutChartCanvas = [
		{
			value: 40,
			color:"#F7464A",
			label: "Camping"

		},
		{
			value : 50,
			color : "#46BFBD",
			label: "Tennis"
		},
		{
			value : 50,
			color : "#659D32",
			label: "Gaming"
		},
		{
			value : 110,
			color : "#FDB45C",
			label: "Reading"
		},
		{
			value : 90,
			color : "#949FB1",
			label: "Hiking"
		},
		{
			value : 70,
			color : "#4D5360",
			label: "Snowboarding"
		}
	];
	var options = {
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>"
}

	var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
	new Chart(ctx).Doughnut(doughnutChartCanvas);
	var doughnutChartCanvas = new Chart(ctx).Doughnut(doughnutChartCanvas, options);
	document.getElementById('js-legend').innerHTML = doughnutChartCanvas.generateLegend();
});
.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
							<canvas class="chartjs" id="doughnutChartCanvas" width="300" height="300"></canvas>
                            <div id="js-legend" class="chart-legend"></div>

Leave a comment