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=".3.7/css/bootstrap.min.css">
<script src=".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>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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./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>2 Answers
Reset to default 10Try this updated code.
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./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>For later versions of ChartJs it has to go in the plugins section
options: {
...
plugins: {
...
legend: {
position: 'bottom'
}
}
}