I am using chartjs 2.0 to build charts. I specified my canvas size to be 200 x 200. However, the canvas comes out to be 1218 x 1218... Does anyone know why this is happening? Here's my fiddle:
https://jsfiddle.net/cdxvokw0/
My html:
<canvas id="myChart" width="200" height="200"></canvas>
My javascript:
var dateArray = ['1', '2', '3', '4'];
var data_array = ['10', '20', '30', '40']
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dateArray,
datasets: [{
label: '# of Votes',
data: data_array,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Probability'
}
}]
}
}
});
Thanks in advance!
You need to add responsive: false to you chart configuration
var myChart = new Chart(ctx, {
type: 'line',
data: {
...
},
options: {
responsive: false,
scales: {
...
}
}
});
Otherwise, the chart tries to be as large as its container
Related
This is using charts.js. This code only makes the line graph but the title, x axis and y axis does not show. I want to add title, and the names for those 2 axis onto the graph. what is wrong and how do you fix it? I also want to make the y axis to start from 0 and up.
async function chartDisplay() {
await getData1();
await getData2();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xLabels,
datasets: [{
data: ratingDataI,
label: "data1",
borderColor: "#3E95CD",
fill: false
},
{
data: ratingDataA,
label: "data2",
borderColor: "#3E95CD",
fill: false
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
y: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});
}
the x and y should not be arrays but objects, also the scaleLabel prop is called title now. For all the changes please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'yAxis'
}
},
x: {
title: {
display: true,
text: 'xAxis'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
There is an old post with a solution that does not work. I tried
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
yAxes: [{
ticks: {
fontSize: 40,
size: 40
}
}]
}
}
but it does not change the font size of the y axis labels of my chart. My chart is a simple chart with just one X axis and one Y axis.
The way scales options and font options are defined have been changed in chart.js v3 along with some other breaking changes, please read the migration guide: https://www.chartjs.org/docs/master/getting-started/v3-migration.html
To change the font size of the ticks you have to define a font opbject in the ticks with a different way of defining the scale.
Live example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
ticks: {
font: {
size: 20
}
}
},
x: {
ticks: {
font: {
size: 20
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
You can use like this
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontSize: 40
}
}]
}
Here is the code which can help you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<div class="container
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<canvas id="myChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');
Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: ["Vanilla", "Chocolate", "Strawberry"],
datasets: [
{
label: "Ice Cream Sales ",
fill: true,
backgroundColor: [
'moccasin',
'saddlebrown',
'lightpink'],
data: [11, 9, 4]
}
]
};
var options = {
title: {
display: true,
text: 'Ice Cream Truck Report',
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontSize: 40
}
}]
}
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
This is the code I'm using to display the chart
<canvas id="myChart"></canvas>
<script>
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
},{
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart');
console.log(data1);
var chart = new Chart(ctx, {
type: 'line',
data: data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
</script>
I've tried pasting a typical chart.js example from their website and the chart is displayed just fine. I have also tried using a string in the x-axis but that doesn't seem to work as well
Can't figure out why this is happening, any help would be greatly appreciated.
As palaѕн commented, you don't correctly retrieve the 2D-Context. This should look as follows.
var ctx = document.getElementById('myChart').getContext('2d');
Further the data object needs to be defined in a different way.
data: {
datasets: [{
data: data1
}]
},
Please have a look at your amended code below.
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
}, {
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: data1
}]
},
data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>
Given a label of dates from the pass 9 days and a data set of numbers(2.5,1.5 etc), I want the the numbers/labels at the y-axis to be whole numbers from 1-5 while maintaining the points. What I'm trying to say is I want to have a fixed number of rows in the grid and I'm clueless on how to do it. Can anyone help me?
Current Graph:
Expected Graph:
Option 1/2: stacked
The shortest way:
yAxes: [{
stacked: true,
}]
https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.6,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
Option 2/2: step-size
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size
More control ==> set step size (To 1 in your example):
yAxes: [{
stacked: true,
ticks: {
stepSize: 1
}
}]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: false,
ticks: {
stepSize: 1
}
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
Here's a simple chart.js horizontal bar chart I'm using:
var myBarChart = new Chart(ctx,{
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [
{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}],
}
}
});
If I change the values to be closer to each other I see the three bars. I need it to draw the bars so they are always visible, even if the values are widely different.
Is there a configuration I missed? How can I fix this?
For some reason, chart.js uses the smallest amount in data as minimum ticks value. Simply adding ticks.min: 0 apparently solves the issue:
var ctx = document.getElementById('chart')
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
ticks: {
min: 0
}
}],
yAxes: [{
display: false
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>