Why doesn't my ChartJS graph work in an iframe? - javascript

I combined these three Elements (CSS, JavaScript, HTML) to put it into my Wix Website, which however did not work. Does anyone has an idea why it doesn't work, since in the demo it works just fine. The problem is that on the Website it shows only "89%" and the pie does not show up. The code is stored in an HTML iframe.
<head>
<style type="text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
<script>
var options1 = {
type: 'doughnut',
data: {
labels: ["Red", "Orange", "Green"],
datasets: [{
label: '# of Votes',
data: [33, 33, 33],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(255, 164, 46, 1)',
'rgba(46, 204, 113, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 5
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 95
}
}
var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx1, options1);
var options2 = {
type: 'doughnut',
data: {
labels: ["", "Purple", ""],
datasets: [{
data: [88.5, 1, 10.5],
backgroundColor: [
"rgba(0,0,0,0)",
"rgba(255,255,255,1)",
"rgba(0,0,0,0)",
],
borderColor: [
'rgba(0, 0, 0 ,0)',
'rgba(46, 204, 113, 1)',
'rgba(0, 0, 0 ,0)'
],
borderWidth: 3
}]
},
options: {
cutoutPercentage: 95,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}
var ctx2 = document.getElementById('secondContainer').getContext('2d');
new Chart(ctx2, options2);
</script>
</body>


I suspect that you just need to load the ChartJS library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</head>
Or:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</body>

Related

Custom tooltip on Chart.js is coming undefined

I am trying to add a custom tool tip wherein I have to put data from another list which I have defined on my code.
I am creating a for loop for iterating through the values but I am getting "undefined" on my tooltip. Where Am i going wrong?
Here is my codepen for the same https://codepen.io/_aishwariya_/pen/WNwzwzR?editors=1010
options: {
tooltips:{
callbacks:{
label:function(tooltipItem,data){
var time_list = [1,2,3,4,5,6];
var time_i = [];
var i;
for (i=0; i < time_list.values; i++){
time_i = time_list[i]
}
let label = "Line 1";
let label2 = "Line 2";
let label3 = time_i[i];
return [label, label2,label3];
}
}
},

To show corresponding value in the array of the hovered item you could use time_list[tooltipItem.index]:
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
data_time = [0, 1, 2, 3, 4, 5, 6];
$(document).ready(function() {
var options = {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Dust",
data: [5, 10, 25, 5, 14, 3],
backgroundColor: ["rgba(48, 79, 254, 0.2)"],
borderColor: ["rgba(48, 79, 254, 1)"],
borderWidth: 1
},
{
label: "Lint",
data: [3, 20, 4, 10, 12, 7],
backgroundColor: ["rgba(136, 14, 79, 0.2)"],
borderColor: ["rgba(136, 14, 79, 1)"],
borderWidth: 1
},
{
label: "Manual Rundown",
data: [6, 10, 22, 21, 4, 18],
backgroundColor: ["rgba(153, 102, 255, 0.2)"],
borderColor: ["rgba(153, 102, 255, 1)"],
borderWidth: 1
},
{
label: "Paint Drop",
data: [3, 5, 19, 22, 18, 6],
backgroundColor: ["rgba(233, 30, 99, 0.2)"],
borderColor: ["rgba(233, 30, 99, 1)"],
borderWidth: 1
},
{
label: "Dry Spray",
data: [12, 28, 22, 14, 6, 3],
backgroundColor: ["rgba(33, 150, 243, 0.2)"],
borderColor: ["rgba(33, 150, 243, 1)"],
borderWidth: 1
},
{
label: "Robot Rundown",
data: [22, 19, 3, 4, 28, 6],
backgroundColor: ["rgba(0, 150, 136, 0.2)"],
borderColor: ["rgba(0, 150, 136, 1)"],
borderWidth: 1
},
{
label: "Shrinkage",
data: [1, 19, 15, 12, 3, 9],
backgroundColor: ["rgba(76, 175, 80, 0.2)"],
borderColor: ["rgba(76, 175, 80, 1)"],
borderWidth: 1
},
{
label: "Mottling",
data: [9, 19, 28, 1, 6, 9],
backgroundColor: ["rgba(255, 152, 0, 0.2)"],
borderColor: ["rgba(255, 152, 0, 1)"],
borderWidth: 1
},
{
label: "Orange Peel",
data: [30, 25, 23, 14, 6, 1],
backgroundColor: ["rgba(255, 87, 34, 0.2)"],
borderColor: ["rgba(255, 87, 34, 1)"],
borderWidth: 1
},
{
label: "Popping",
data: [20, 30, 23, 13, 3, 2],
borderWidth: 1
},
{
label: "Spittage",
data: [12, 17, 23, 27, 30, 15],
borderWidth: 1
},
{
label: "Blister",
data: [18, 20, 25, 22, 12, 8],
borderWidth: 1
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
}
},
animation: {
tension: {
duration: 1000,
easing: "linear",
from: 1,
to: 0,
loop: true
}
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, options);
chart.getDatasetMeta(0).hidden = false;
chart.getDatasetMeta(1).hidden = false;
chart.getDatasetMeta(2).hidden = false;
chart.getDatasetMeta(3).hidden = true;
chart.getDatasetMeta(4).hidden = true;
chart.getDatasetMeta(5).hidden = true;
chart.getDatasetMeta(6).hidden = true;
chart.getDatasetMeta(7).hidden = true;
chart.getDatasetMeta(8).hidden = true;
chart.getDatasetMeta(9).hidden = true;
chart.getDatasetMeta(10).hidden = true;
chart.getDatasetMeta(11).hidden = true;
function updateValLow() {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
lowFactor();
$("#defLow").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
lowFactor();
}
});
};
function updateValMid() {
$("#defLow").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
midFactor();
$("#defMid").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
midFactor();
}
});
};
function updateValHig() {
$("#defMid").multiselect("destroy");
$("#defLow").multiselect("destroy");
highFactor();
$("#defHig").multiselect({
onChange: function(option, checked, select) {
highFactor()
}
});
}
$("#defData").change(function() {
var val = $(this).val();
if (val == "low") {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", false);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", true);
//$("#defLow").multiselect();
updateValLow();
chart.update();
} else if (val == "medium") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", false);
$("#highData").attr("hidden", true);
updateValMid();
chart.update();
} else if (val == "high") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
updateValHig();
//$("#defHig").multiselect();
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", false);
//$("#defHig").multiselect('rebuild');
chart.update();
}
});
$("#defLow").multiselect({
onLoad(element) {
lowFactor();
},
onChange: function(option, checked, select) {
var curVal = $("#defLow").val();
lowFactor();
}
});
$("#defMid").multiselect({
onLoad(element) {
midFactor();
},
onChange: function(option, checked, select) {
midFactor();
}
});
$("#defHig").multiselect({
onLoad(element) {
highFactor();
},
onChange: function(option, checked, select) {
highFactor();
}
});
});
/* canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData label{
display: block!important;
}
ul.multiselect-container, .btn-group{
width:100%;
} */
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData,
#midData,
#highData {
label {
display: block !important;
margin-bottom: 0.5rem;
}
.multiselect-native-select {
.btn-group {
button {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
text-align: left;
&::after {
position: absolute;
right: 15px;
top: 16px;
}
}
.multiselect-container {
li {
height: 46px;
label {
padding: 10px 20px;
margin-bottom: 0;
}
&:hover {
background: #333;
label {
color: #fff;
}
}
}
}
}
}
}
ul.multiselect-container,
.btn-group {
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-3">
<div class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defData">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="col-3">
<div id="lowData" class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defLow" multiple="multiple">
<option value="shrinkage" selected="selected">Shrinkage</option>
<option value="mottling" selected="selected">Mottling</option>
<option value="spittage" selected="selected">Spittage</option>
<option value="blister" selected="selected">Blister</option>
</select>
</div>
<div id="midData" class="form-group mt-3 mb-3" hidden>
<label for="defMid">Select Factor</label>
<select class="form-control" id="defMid" multiple="multiple">
<option value='pdrop' selected='selected'>Paint Drop</option>
<option value='dspray' selected='selected'>Dry Spray</option>
<option value='rbdown' selected='selected'>Robot Rundown</option>
<option value='opeel' selected='selected'>Orange Peel</option>
<option value='popping' selected='selected'>Popping</option>
</select>
</div>
<div id="highData" class="form-group mt-3 mb-3" hidden>
<label for="defHig">Select Factor</label>
<select class="form-control" id="defHig" multiple="multiple">
<option value='dust' selected='selected'>Dust</option>
<option value='lint' selected='selected'>Lint</option>
<option value='mrd' selected='selected'>Manual Rundown</option>
</select>
</div>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<canvas id="myChart"></canvas>
</div>
<div class="col-2"></div>
</div>
</div>

How to make the chart smaller than its container

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>

How to remove left and right padding from the canvas/chart?

At the left and right side of the white container, you can see the graph isn't touching entirely on either side, there's a small amount of padding, and I cannot remove it at all.
I tried setting the layout.padding.left to a negative value, but that had no affect, however positive value does move the chart inward, same applies for top and bottom padding.
The only solution that I came up with was adding another div inside the container, and making the canvas width bigger and then using a left negative margin position it, making the line touch the .container corners. Like this jsfiddle but it's only a temporary solution.
JSFIDDLE
var options = {
type: 'line',
data: {
labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''],
datasets: [{
data: [80, 100, 100, 115, 119, 105, 100, 90],
pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0],
pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0],
borderColor: '#3ca2e0',
backgroundColor: 'rgba(60, 162, 224, .1)',
lineTension: 0.6,
// points
pointBackgroundColor: '#3ca2e0',
pointHoverBackgroundColor: '#3ca2e0',
pointBorderColor: '#ffffff',
pointHoverBorderColor: '#ffffff',
pointBorderWidth: 2.5,
pointHitRadius: 10,
radius: 5,
borderWidth: 2.5
}],
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
},
gridLines: {
drawBorder: false,
display: false,
drawTicks: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks:{
fontColor: '#858585'
}
}]
},
layout: {
padding: {
top: 10,
}
}
},
}
var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, options);
body { background-color: #1c2128 }
.container {
width: 500px;
background-color: #ffffff;
margin: 20px auto;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<div class="container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</body>

One solution would be to use a second container.
The canvas seems to resize based on its parent width.
<body>
<div class="container">
<div class="canvas-container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
body {
background-color: #1c2128;
}
.container {
width: 490px;
overflow: hidden;
margin: 20px auto;
}
.canvas-container {
width: 500px;
background-color: #ffffff;
height: 200px;
margin-left: -5px;
}

chart.js chart distorted with fixed width

I have a chart.js canvas inside a container which I gave a fixed min-width, so people could scroll the chart on mobile devices.
But as soon as the container has its fixed width, the chart is getting more distorted, the smaller the screen gets.
In the chart I have already tried setting the options responsive: true and maintainAspectRatio: false. This solved the problem a bit, but the chart is still distorted.
Chart.js Options:
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: false,
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}]
}
};
HTML:
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="tds-chart-mem"></canvas>
</div>
CSS:
.tds-chart-inner {
min-width: 850px !important;
}
.tds-hor-scroll {
left: 0px;
width: 100% !important;
overflow-x: scroll;
}
canvas {
left: 0px;
height: 300px !important;
}
Working chart
Distorted chart

for me the problem was that graph was setting for itself height that was bigger that I myself had set to canvas.
my solution was:
I removed all height setups for canvas (css and tag attribute)
Created container tag for the canvas and set height to it
in chart options added:
responsive: true,
maintainAspectRatio: false,
in the example in the question problem was in css:
canvas {
left: 0px;
height: 300px !important;
}
i would change it to:
.tds-hor-scroll {
overflow-x: auto;
}
.tds-chart-inner {
min-width: 850px;
height: 300px;
}
<div class="tds-hor-scroll">
<div class="tds-chart-inner">
<canvas id="tds-chart-mem"></canvas>
</div>
</div>

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<style>
.tds-chart-inner {
width:100%;
}
</style>
<body class="">
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
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,80],
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,
fontColor: 'red'
}
}]
}
}
});
</script>

chart.js renders outside div and canvas

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

Categories