Menu
i am using chart js for developing my pie chart. i want to create the legend position just like this. anyone please help me to solve this...
here is my code... i actually want the result just like the picture. and i getting error when i use css zoom:70% in html and make the javascript didn't work..
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<style type="text/css">
body{ background-color: #1f1d1d; font-family: Roboto, Myriad Pro, Segoe UI;zoom:70%;}
.col-sm-1.content { border: 2px solid #1f1d1d}
</style>
<body>
<div class="col-sm-1 content" style="background-color: #4f4f4f; height:377px;"><br><br><br>
<canvas id="myChartBBC" style="width:375px; height: 375px;"></canvas>
<br>
<p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
</div>
</body>
<script>
var ctx = document.getElementById('myChartBBC').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
datasets: [{
backgroundColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
borderColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
data: [73, 17, 3, 7],
}]
},
// Configuration options go here
options: {
legend:{
position: 'bottom',
labels:{
fontColor: "white"
}
}
}
});
</script>
</html>
386
Click the chart, and then click the Chart Design tab. Click Add Chart Element > Legend. To change the position of the legend, choose Right, Top, Left, or Bottom. To change the format of the legend, click More Legend Options, and then make the format changes that you want.
To make this behave the same as standard Chart. js charts, the function onLegendClicked is invoked when a mouse click occurs on a legend label. This function toggles the hidden state of individual datasets and changes label text style between normal and strike-through.
The chart legend displays data about the datasets that are appearing on the chart.
Try this updated code.
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
background-color: #1f1d1d;
font-family: Roboto, Myriad Pro, Segoe UI;
width: 800px;
height: 800px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div id="canvas-holder" style="width:30%;background-color: #4f4f4f; height:35%;">
<canvas id="chart-area"></canvas>
<p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
</div>
<script>
var config = {
type: 'pie',
data: {
labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
datasets: [{
backgroundColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
borderColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
data: [73, 17, 3, 7],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontColor: "white",
boxWidth: 20,
padding: 20
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
