I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
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
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.
Related
I'm trying to build a chart of the top 10 activities that take the most time to perform and I'm basing myself on the duration of each one.
I created an example in Google Spreadsheet to exemplify what i need.
I couldn't create a graph with 'hour' data, so I converted it to seconds. But I would like to display the hours on the X axis as in the image.
Here's my code:
enter link description here
<canvas id="myChart" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Work", "Study", "Gym"],
datasets: [{
label: '# activities',
data: [30000, 9000, 5400],
time: ['08:20', '02:30', '01:30:00'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return 'Duration ' + data['datasets'][0]['time'][tooltipItem['index']];
}
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 5000
}
}]
}
}
});
</script>
Any tips?
You can define a ticks.callback function on your x-axis as follows:
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 7200,
callback: v => Number.isInteger(v / 3600) ? (v / 3600) + ':00:00' : ''
}
}]
Please take a look at your amended and runnable code below and see how it works.
var myChart = new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ["Work", "Study", "Gym"],
datasets: [{
label: '# activities',
data: [30000, 9000, 5400],
time: ['08:20', '02:30', '01:30:00'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return 'Duration ' + data['datasets'][0]['time'][tooltipItem['index']];
}
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 7200,
callback: v => Number.isInteger(v / 3600) ? (v / 3600) + ':00:00' : ''
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="90"></canvas>
I tried changing the xticks color of chart js but somehow this is not working. This is the cdn I am using.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
function plot(x, y, chartTitle, labelText) {
$("#canvasCard").html(
'<canvas id="myChart" width="600px" height="600px"></canvas>'
);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: x,
datasets: [
{
label: labelText,
data: y,
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: 2,
},
],
},
options: {
responsive: false,
plugins:{
title: {
display: true,
text: chartTitle
}},
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
},
},
});
}
Doesn't have any effect
I googled the problem and many of them have listed the same thing as it is in the scales object. Still it isn't working. Any help appreciated
Thank you in advance.
I found the answer! In v3.4.1 or v3 and above chart js has different description.
Trying this worked. So this works
scales: {
y: {
beginAtZero: true,
ticks:{
color: "white"
}
},
x:{
ticks:{
color: "white"
}
}
}
Instead of the following code. The following works in previous versions.
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
}
Thank You.
I'm trying to use chartjs-datalabels-plugin to show values on the chart. but I can't make it work on jsfiddle
Here's my code
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>
I import chartjs-datalabels-plugin in jsfiddle and then in options I enable the display option to true. but no value is shown in the chart.
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
....
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: true,
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});
Datalabels plugin requires Chart.js 2.7.0 or later.
In your fiddle you used 2.4.0 version.
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
height: 200,
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: [
'#F4B266',
'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)'
],
borderWidth: 1
},
{
label: '# of Votes',
data: [18],
backgroundColor: [
'#AEB7B2',
'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)'
],
borderWidth: 1
}
]
},
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: function(context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>
I have a chart.js chart in my app. This is how it looks without negative values:
With negative values:
As you can see I have dual axisY. They work as needed if there are no negative values. But if there are some, right AxisY starts in the incorrect position.
How to make it starts in the same place as left AxisY?
Here is my code:
private buildOptions(): any {
return {
responsive: true,
title: {
display: false,
text: ''
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff'
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff'
}]
},
legend: {
display: true,
labels: {
fontColor: '#fff'
}
}
};
}
Thank you.
Have you tried setting the same min value for both axes?
You can use ticks for specifying it:
ticks: {
min: -5
}
Here's an example snippet I made for you:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, -5, 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: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff',
ticks: {
min: -5
}
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff',
ticks: {
min: -5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
I'm implementing Chart.js into my AngularJS app, and I'm loading the chart data from server API into $scope.chartData that is an array of numbers.
I need to access this variable from Chart.js, and using the script example on their website, I'm not sure how to access the variable. Trying something like:
home.html:
<!-- A bunch of HTML, then -->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Balance',
data: {{chartData}}, //this is where I need to access the variable
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
}
}]
}
}
});
</script>
What would be the best way (not a work around) to accomplish loading this data into the chart script?
You should use the library angular-chart.js inorder to use with angularjs.
You can assign the data part to the options config.
DEMO
angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
$scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
$scope.chartOptionsPercent = {
title: {
display: true,
text: "Downtime Percentage of Equipment",
fontSize: 20
},
legend: {
text: "Hello"
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
min: 0,
max: 100
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Name of Equipment'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Percentage of Downtime (%)'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
$scope.dataPercent = [5, 6, 7, 12];
});
<!DOCTYPE html>
<html>
<head>
<title>radar Chart</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ChartCtrl" style="width:360px">
<canvas class="chart chart-bar" chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent" ></canvas>
</div>
</body>
</html>