HTML
<body>
<div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
JAVASCRIPT
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options =
{
title:
{
display:false,
},
legend:
{
display:false
},
tooltip:
{
enabled:false
},
animation:
{
duration: 0
}
}
var data =
{
datasets:
[
{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0
}
]
}
var chart =
new Chart(context,
{
type: "doughnut",
cutout: 100 * radius,
responsive: true,
data: data,
options: options
});
</script>
FIDDLE
https://jsfiddle.net/t5a41rdj/
As per title, somehow this chart has a little offset on top which I can't seem to be able to get rid of, despite having disabled legend and title.
Anything obvious I am missing?
This is because you did not disable the legend, title or tooltip. If you hover your chart you can see the tooltip is still working, title is hidden by default. Why the legend does not show I dont really know, should still show 1 item with undefined as text. But if you disable it in the correct space with is the plugins namespace you see your extra padding goes away.
Also cutout and responsive have to be configured in the options not in the root of new Chart:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options = {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
animation: {
duration: 0
},
cutout: 100 * radius,
responsive: true,
}
var data = {
datasets: [{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0,
}]
}
var chart =
new Chart(context, {
type: "doughnut",
data: data,
options: options
});
<body>
<div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Related
My charts are changing its alignments due to the size of X-axis label names. The angle of the names also change in order to make it fit in the view. I do not want any changes in the graph alignments (which I believe is due to names printed in an angle) and also want the names in X-Axis to print normally. Graph wrong alignment images.
I have tried using the maxRotation and minRotation to 90 but here all the values are tilted to 90. I want this to be made dynamic ie. the angle must be either 0 or 90 (if the program wants to change angle).
Chartjs code
scales: {
y: {
beginAtZero : false,
ticks: {
display: false,
},
grid : {
display : false,
drawTicks : false,
drawBorder: false
},
},
x: {
maxBarThickness: 10,
ticks : {
color: 'black',
maxRotation: 90,
minRotation: 0,
autoSkip: false,
fontSize : 10,
},
grid : {
display : false,
drawTicks : false
}
}
}
HTML code to hold charts
<style>
.first {
float : left;
width: 45%;
margin: 10px;
}
</style>
<div class ="first"> <canvas id="Services"></canvas> </div>
<div class ="first"> <canvas id="VPN"> </canvas> </div>
<div class = "first"> <canvas id="Policy ID"></canvas> </div>
<div class = "first"> <canvas id="Source Country"></canvas> </div>
<div class = "first"> <canvas id="Source IP"> </canvas> </div>
<div class = "first"> <canvas id="Destination IP"></canvas> </div>
How do I achieve this where I can change the tilt angle to 90 if required ?
You can dynamically change it in the chart config itself and then call update on the chart like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
x: {
ticks: {
minRotation: 0,
maxRotation: 0
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
document.getElementById("switch").addEventListener("click", () => {
chart.options.scales.x.ticks.minRotation = chart.options.scales.x.ticks.minRotation === 0 ? 90 : 0;
chart.options.scales.x.ticks.maxRotation = chart.options.scales.x.ticks.maxRotation === 0 ? 90 : 0;
chart.update();
});
<body>
<button id="switch">
Switch tick rotation
</button>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
The Chart Spans across the entire Web Page and I cant resize it. I've tried seting the height/width of the canvas and the canvas with no luck.
Here is my Html:
<div id="chartbox">
<canvas id="myChart" display="block"></canvas>
</div>
<script>
var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]
var thisChart = new Chart(document.getElementById("myChart"), {
type: 'line',
options: {
responsive: true
},
data: {
labels: xaxis,
datasets: [
{
data: yaxis,
label: "Test",
borderColor: "#3e95cd",
}
]
}
});
</script>
If you are styling the canvas element directly with non relative values you need to set responsive to false in the options, if you are styling the width with relative values you need to apply them to the surrounding div
https://www.chartjs.org/docs/master/configuration/responsive.html
I hope my answer is helpful to you, you just have to specify certain CSS rules for the parent element of the graphic.
var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]
var thisChart = new Chart(document.getElementById("myChart"), {
type: 'line',
options: {
responsive: true
},
data: {
labels: xaxis,
datasets: [
{
data: yaxis,
label: "Test",
borderColor: "#3e95cd",
}
]
}
});
#chartbox {
display: block;
width: 400px;
height: 400px;
}
<div id="chartbox">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
I have a large data set which, when graphed have several vertical sections as shown below. Chart.js formats these sections with thin, semi-transparent coloring. I want to format these to match the regular, thicker and solid line style.
The dataset itself is normally in a separate file called data.js, but I linked a portion of it from a CodePen.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 12,
fontStyle: 'bold',
display: true,
labelString: 'Y(1)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 30,
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
fill: false,
label: 'Graph Line',
data: data,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
}
};
var chart = new Chart(ctx, config);
</script>
</html>
I figured it out, what you're seeing when you look at the graph is actually mostly just the individual points. Due to the large number of point data, it wasn't apparent at first, but the lines were thinner than the points width.
The vertical lines being so much thinner are actually because those are formatted with the line settings. By setting the transparency of the points color and border to 0, and by reformatting the line settings, I got was able to format it the way I intended. Sample below for reference should anyone else have a similar issue in the future.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 12,
fontStyle: 'bold',
display: true,
labelString: 'Y(1)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 30,
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'Graph Line',
data: data,
}]
}
};
var chart = new Chart(ctx, config);
</script>
</html>
Note: I'll accept this answer when it allows me in 2 days since it's my own.
I'm using Chart.js to create pie charts. I need each chart to be 76x76px. Unfortunately, the rendered chart is always a bit smaller than the size if the wrapping div and the canvas itself.
If you inspect the chart in the FIDDLE, you'll see what I mean: the canvas element has a fixed size but the chart itself doesn't fill it fully.
It's almost as if there was a top margin reserved for something that isn't there.
The code:
HTML
<div class="wrapper">
<canvas id="myChart" width="76" height="76"></canvas>
</div>
JS
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 70],
backgroundColor: [
'green',
'gray'
],
borderWidth: 0
}]
},
options: {
tooltips: {
enabled: false
},
events: []
}
});
CSS
.wrapper {
width: 76px;
height: 76px;
}
Any ideas what I should do to make the pie chart fill the 76x76px canvas?
The additional space is reserved for the legend, which is enabled by default. Simply disable it and you should have the whole space for the chart:
legend: {
display: false
}
A working example:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 70],
backgroundColor: [
'green',
'gray'
],
borderWidth: 0
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false // <- the important part
},
events: []
}
});
.wrapper {
width: 76px;
height: 76px;
border: 1px solid black; /* for demonstration purposes*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<div class="wrapper">
<canvas id="myChart" width="76" height="76"></canvas>
</div>
I have issues to get the chart.js line chart to be responsive on the height as well as the width.
See example what it should be working like:
http://www.chartjs.org/samples/latest/charts/line/basic.html
Here is my code:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ['January','February','March','April','May','June','July'],
datasets : [
{
label: 'My First dataset',
labelColor : '#fff',
fontColor : '#fff' ,
backgroundColor : 'rgba(220,220,220,0.2)',
borderColor : 'rgba(220,220,220,1)',
pointBackgroundColor : 'rgba(220,220,220,1)',
pointBorderColor : '#fff',
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var options = {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
},
}],
yAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
beginAtZero: true,
}
}]
}
};
var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
responsive: true,
type: 'line',
data: lineChartData,
options: options
});
Create Class
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
Create Div With class chart-container and place canvas tag inside it.
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Chart options, use property maintainAspectRatio set to false:
options: {
maintainAspectRatio: false,
responsive: true,
...
}
As from Docs for Chart.js it's recommended to wrap canvas into container div and change width/height of the container. But basically it's changing either by given width or height.
Found a more flexible custom solution from lannymcnie that can be used for any canvas responsiveness:
var stage = new createjs.Stage("canvas");
var c = new createjs.Shape();
c.graphics.f("#f00").dc(0,0,50); // Drawn a 100x100 circle from the center
var t = new createjs.Text("Resize the browser/frame to redraw", "24px Arial bold", "#000");
t.x = t.y = 20;
stage.addChild(c, t);
window.addEventListener("resize", handleResize);
function handleResize() {
var w = window.innerWidth-2; // -2 accounts for the border
var h = window.innerHeight-2;
stage.canvas.width = w;
stage.canvas.height = h;
//
var ratio = 100/100; // 100 is the width and height of the circle content.
var windowRatio = w/h;
var scale = w/100;
if (windowRatio > ratio) {
scale = h/100;
}
// Scale up to fit width or height
c.scaleX= c.scaleY = scale;
// Center the shape
c.x = w / 2;
c.y = h / 2;
stage.update();
}
handleResize(); // First draw
html, body {
padding: 0; margin: 0;
overflow:hidden;
}
canvas {
border: 1px solid #f00;
}
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>
You can have it responsive and set a different aspect ratio. My issue was that the chart tend to be squeezed on mobile device taking barely no height.
To remedy, with chart.js 3.2.1, I am using the AspectRatio option:
options: {
aspectRatio: 1,
}
This way the chart is square and stay square, you can play with this number usually between 0.5 to 2 to find a ratio that suits you on both displays.