I'm implementing asp.net core project. I have a pie chart.js. I used outlabel plugin to show labels for each piece of the piechart. Now the problem is how I can make the chart smaller than its container in order to show all the labels completely. Right now after running the project, the console displays half of the few of the labels. My code is like the following:
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> #*padding:20px;*# #*width="650" height="450"*#
<canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas> #*width="710" height="520"*#
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
#*outlabel plugin*#
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
$(function () {
var bgcolor= [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
labels: #Html.Raw(XLabels),
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: #Html.Raw(YValues)
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
//===================================new outlabel implementation
//outlabel implementation
zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
//===================================
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
</script>
<style>
.container, .box1,box2,box3 {
/*display: block;*/
/*padding: 10px;*/
margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
text-align: justify;
}
.container{
border:1px solid red;
display: block;
}
.box2{
border:1px solid purple;
padding-top: 60px;
background-color: yellowgreen;
padding-bottom: 60px;
/*padding-right:40px;
padding-right:40px;
padding-left:40px;*/
margin-top:40px;
margin-right:40px;
display: inline-block;
/*float:left;*/
}
</style>
There was similar issue on github
One workaround is to use layout option
new Chart(ctx, {
...,
layout: {
padding: 100
}
}
Example
$(function() {
var bgcolor = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
width: 100,
height: 100,
labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: [20, 40, 30, 10, 50, 15, 10]
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
layout: {
padding: 100
},
zoomOutPercentage: 55,
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type: 'pie'
});
})
.container,
.box1,
box2,
box3 {
margin-bottom: 50px;
text-align: justify;
}
.container {
display: block;
}
.box2 {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
<canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
</div>
</div>
</div>
Related
i have this html code to make table from chart dataset automatic, but the table size is not the same as the chart, i wanted to make the table size same as the chart size or same as the box. // i tried to change the css but it doesnt work, hope u can helpyour text
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100%;
height: 40px;
background: #1A1A1A;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100%;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
.table, th, td{
border-collapse: collapse;
border: 1px solid black;
padding:10px;
height: auto;
}
.chartjs-thead {
font-weight: bold;
}
.chartjs-body {
text-align: center;
}
/* .table1 {
width: 50%;
} */
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
<body onload="createTable()"></body>
<!-- <canvas id="mytable"></canvas> -->
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const cars = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun'];
</script>
<script>
// setup
const data = {
labels: cars,
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},
{
label: 'Weekly daw',
data: [1, 1, null, 11, 1, 13, 15],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}
]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
the table function
function createTable(){
console.log('triggered');
const chartBox = document.querySelector('.chartBox');
const tableDiv = document.createElement('div');
tableDiv.setAttribute('id', 'tableDiv');
const table = document.createElement('table');
// add thead
const thead = table.createTHead();
thead.classList.add('chartjs-thead');
thead.insertRow(0);
console.log(data.labels)
for(let i = 0; i< data.labels.length; i++) {
thead.rows[0].insertCell(i).innerText = data.labels[i];
};
thead.rows[0].insertCell(0).innerText = 'Days';
table.style.width = "50%";
// add tbody
const tbody = table.createTBody();
tbody.classList.add('chartjs-tbody');
console.log(data.datasets)
data.datasets.map((dataset, index) => {
tbody.insertRow(index);
for(let i = 0; i < data.datasets[0].data.length; i++){
tbody.rows[index].insertCell(i).innerText = dataset.data[i];
};
tbody.rows[index].insertCell(0).innerText = dataset.label;
})
//<table>
//<thead>
// <tr>
// <td></td>
// </tr>
//</thead>
//</table>
chartBox.appendChild(tableDiv);
tableDiv.appendChild(table);
};
</script>
// i tried to change the css but it doesnt work, hope u can help
I am creating a dashboard that has multiple Chart.js. The dashboard has sidebar navigation which can be minimized when clicking the toggle button. Which increases the width of the container.
The chart does not fit its container to its height as you can see in the image.
but If I add CSS for the canvas tag it will use the height that is specified in the CSS. But its stretches the chart and makes it blury.
Also If I toggle the sidebar to minimize, the width of the chart increases but when I toggle to maximize the size of sidebar, the width of chart does not decrease according to the width of main container. As you can see, the dark part expanded outside the viewport.
HTML:
<div class="graph1">
<div>
<h5>Profit & Loss (Column Grouped Chart)</h5>
<canvas id="myChart1"></canvas>
</div>
<div>
<h5>Fuel Consumed (Litres)</h5>
<canvas id="myChart2"></canvas>
</div>
<div>
<h5>Fleet Usage</h5>
<canvas id="myChart3"></canvas>
</div>
</div>
CSS:
.graph1 {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 1rem;
height: 26rem;
margin-bottom: 1.5rem;
& > div {
padding: 1rem;
box-shadow: 0px 3px 6px #00000029;
border-radius: 0.6rem;
}
canvas {
width: 100%;
min-height: 26rem;
}
}
JS:
/*Chart1*/
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: true,
// scales: {
// y: {
// beginAtZero: true,
// },
// },
},
});
I just coded my first chart in chart.js, but i cant move it to the center of my webpage
here is my code for the chart in html:
Use "display:block;margin:0 auto;" to center the div containing the JS table.
Make a container for your canvas and give it display: inline-block style. Then you can treat the container like any html block.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
.outbox{
text-align: center;
}
.container{
width: 50%;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="outbox">
<div class="container">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
You want to center the canvas since that is where the chart is drawn on. To center the canvas see this stack article: How to center canvas in html5
My charts are rendering correctly, but they are overlapping on the same spot and change between themselves depending on where I mouseover (both graphs are in exactly the same position even though their canvas and div elements are not). Here are the images to show the div and canvas locations:
Canvas 1
Canvas 2
I am not familiar with CSS so I used some tutorial snippets to get a temporary layout before I begin to change the style and colours, but I need help on positioning these elements correctly.
Here is the HTML code:
<div id="awp" class="tabcontent">
<div class="dropdown">
<button onclick="dropMenu(1)" class="dropbtn">Choose Dates</button>
<div id="myDropdown1" class="dropdown-content">
<a id="2016" onClick="addData(myChart, 'check' , 2)">Last 3 Months</a>
<a id="5m" onClick="removeData(myChart)">Test 3</a>
<a id="testNew">Bye bye</a>
<a id = "2015" onClick="addMoreData(myChart)">does</a>
</div>
</div>
<h3>Recreated in chart.js first graphs</h3>
<div class="contain1">
<canvas id="results-graph" class="cyo" width="600" height="500"></canvas>
</div>
<div class="contain2">
<canvas id="results-graph2" class="oem" width="600" height="500"></canvas>
</div>
Here is the CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
.contain1 {
width: 600px;
height: 500px;
float: left;
overflow: auto;
}
.contain2 {
width: 600px;
height: 500px;
float: right;
overflow: auto;
}
.cyo {
display: block;
width: 600px;
height: 500px;
}
.oem {
display: block;
width: 600px;
height: 500px;
}
Here is the chart code:
<script>
var data = [12, 19, 13, 5, 21, 13];
var ctx = document.getElementById("results-graph");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data,
yAxisID: 'A',
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',
}
}]
}
}
});
</script>
<script>
var data2 = [12, 19, 13, 5, 21, 13];
var ctx2 = document.getElementById("results-graph");
var myChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data2,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data2,
yAxisID: 'A',
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',
}
}]
}
}
});</script>
You did not change the that is why the second graph did not generate.
var ctx2 = document.getElementById("results-graph2");
Also you can provide background and border like this.
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
JSFiddle: here
I'm trying to print a bar chart for every product to show a summary of data but the bar chart is showing only once with different values at y-axis.
How can I show the data for each product on a bar chart?
Review.js
angular.module('App.review',[]).directive('review', function($cookieStore){
return{
restrict:'E',
controller:function($scope, $window, $http){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl:'scripts/directives/ReviewDirective/review.html',
transclude:false
}
});
review.html
<div style="width:100%; border:solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
product.html
<td ng-controller="ReviewsCtrl" >
<div data-ng-repeat="r in dataList" >
<div data-ng-if=" r.id == item.productId">
<div data-ng-init="data =r.data" >
{{data=r.data}}
<review></review>
</div>
</div>
</div>
</td>
Check this code
var app = angular.module('App.review', []);
app.directive('review', function () {
return {
restrict: 'E',
scope: {
data: "=data"
},
link: function ($scope, element, attrs) {
var ctx = element[0].querySelector('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl: 'review.html',
transclude: false
}
});
app.controller('ReviewsCtrl', function ($scope) {
$scope.dataList = [{
productId: 1,
productName: 'One',
data: [1, 2, 3, 4, 5]
}, {
productId: 2,
productName: 'Two',
data: [6, 7, 8, 1, 1]
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<div ng-app="App.review">
<table>
<tr>
<td ng-controller="ReviewsCtrl">
<div data-ng-repeat="r in dataList">
{{r.productName}}
<review data="r.data"></review>
</div>
</td>
</tr>
</table>
<script type="text/ng-template" id="review.html">
<div style="width: 100%; border: solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
</script>
</div>