I'm trying to display data in a bar chart using chart.js. I'm using multiple datasets so I can show the data id as the lable of the dataset. I have only one datapoint in each dataset and the x-axis displays the time. I want to display 15 datasets. The problem is, when displaying more than one datasets some bars get out of bound. How it looks and how I want it to look like. I
I tried the barPercentage and the categoryPercentage options without any success.
Here is what I got so far:
<html>
<head>
<script src="node_modules\chart.js\dist\Chart.bundle.js"></script>
<style>
canvas{
height:120px !important;
width:302px !important;
}
</style>
</head>
<body>
<div>
<canvas id= "myChart" width=400 height=400></canvas>
</div>
<script>
<!-- My script for the Chart -->
</script>
</body>
</html>
And the script that handels the chart:
//The array of datasets that I want to display
var datasetarray = [{
label: 'Secounds needed for dummy build',
data: [{x:"19700101T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}
, //Some more datasets
,{
label: 'Secounds needed for dummy build',
data: [{x:"19710315T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}];
//Creating the Chart
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: datasetarray
},
options: {
maintainAspectRatio: false,
legend: {display: false},
scales: {
xAxes: [{
type:'time',
distribution: 'series',
barPercentage: 0.9,
categoryPercentage: 0.9,
bounds:'data',
offset:false,
ticks:{source: 'labels'}
}],
yAxes: [{
ticks: {
suggestedMax: 100
,suggestedMin: 20
,beginAtZero: true
}
}]
}
}
});
EDIT: Here's a jsfiddle that may help you helping me. Thanks in advance :)
Related
I am using Chart.js plugin.
I want to reduce the horizontal spacing.
Image 1 : I try
Image 2 : I want
JSFiddle Link Here!
HTML Code Here
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="800" height="300"></canvas>
CSS Code Here
canvas {
margin:0 auto;
}
JS Code Here
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['April', 'May'],
datasets: [{
label: 'facebook',
borderColor: 'rgba(0,0,0,0)',
backgroundColor: '#3b5998',
data: [179, 201]
}, {
label: 'instagram',
borderColor: 'rgba(255,255,255,0)',
backgroundColor: '#e8361c',
data: [31, 47]
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0
},
gridLines: {
display:false
}
}],
xAxes: [{
display:true,
barPercentage: 0.7,
categoryPercentage: 0.3,
gridLines: {
display:false
}
}]
},
legend: {
position:'bottom'
},
animation:false
}
});
I want to reduce the interval between categories. I do not know if there is a corresponding option. Please help me.
We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath.
In the below example I've gotten the x-axis how I want it by adding an extra item in the labels array and displaying a second x-axis in the options. But, because there's now an extra label, the bars are taking up 4/5ths of the width, leaving space for a non-existent data point.
Is there some way that I can specify to ignore the missing data point? Or offset the bars? Or am I barking up the wrong tree?
The documentation is a little hard to parse through, so I'm not sure if there's something simple I'm missing.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4],
datasets: [{
label: 'Group A',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
display: false,
barPercentage: 1.30,
}, {
display: true,
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>
Edit: I realize there are other libraries that could achieve something similar and I am looking into other options. But, I've posted this just in case someone out there knows of a solution via Chart.js, which would be ideal.
Here's an example of what the end result I'm going for is:
I believe you can get the result you want by using the max parameter on the ticks configuration of the x axes.
By using 2 different x axes with different maximums you can label the bars differently from how they're drawn. Resulting in labeling the marks in between the bars without drawing an extra "empty" bar.
var ctx = document.getElementById("myChart").getContext('2d');
var dataValues = [12, 19, 3, 5];
var dataLabels = [0, 1, 2, 3, 4];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dataLabels,
datasets: [{
label: 'Group A',
data: dataValues,
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
display: false,
barPercentage: 1.3,
ticks: {
max: 3,
}
}, {
display: true,
ticks: {
autoSkip: false,
max: 4,
}
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>
I'm trying to remove the stroke color from the legend generated by ChartJS, but I can't quite seem to understand what the documentation is telling me.
My current code looks like this:
legend: {
position: 'bottom',
labels: {
generateLabels: function() {
return {
strokeStyle: "black",
}
}
}
}
Though I have tried this:
generateLabels: {
strokeStyle: "black",
}
I'm setting the stroke style to "black" to see if I'm having any effect, but I'm not even sure if that's what I'm supposed to be doing. I would think I could set it to none.
Edit
Here is the code for my full object:
var ctx = $('#chart');
var data = {
labels: ["1","2","3","4","5","6","7"],
datasets: [{
data: [22,19,17,15,10,9,8],
backgroundColor: [
'#df4344',
'#fc9627',
'#fcd949',
'#d4d81e',
'#6dc7ba',
'#24a38e',
'#263a7e',
'#5050b2',
'#4f7ec1',
'#96afe2',
],
borderColor: ["black"],
borderWidth: 2
}]
};
var wheel = new Chart(ctx, {
type: "doughnut",
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: false,
cutoutPercentage: 60,
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
But now that I run it here, it seems to be working. So I'm not sure what's wrong anymore.
To remove the stroke from legend, you need to set borderWidth property to 0 for your dataset, like so ...
datasets: [{
borderWidth: 0,
...
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = c.getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Statistics',
data: [3, 1, 2, 5, 4],
backgroundColor: 'rgba(0, 119, 204, 0.1)',
borderColor: 'rgba(0, 119, 204, 0.8)',
borderWidth: 0 //<-- set this
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c"></canvas>
I'd like to have more spacing between the bars in my horizontal bar graph. It looks terrible on a mobile device, and barely acceptable on a desktop browser. How can I accomplish this?
ChartJs Version: 2.4.0
function renderBarChart(chartDomID, title, labels, dataPoints, barColor) {
var ctx = document.getElementById(chartDomID).getContext("2d");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: [
{
label: title,
data: dataPoints,
fill: false,
pointBorderColor: barColor,
backgroundColor: barColor,
borderColor: barColor
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
// Suggest to start the y-axis at 0, if ChartJS thinks it makes sense.
suggestedMin: 0
}
}]
},
legend: {
display: false
}
}
});
Mobile View
Desktop View
You have to add width and height as an example here.
<canvas id="myChart" width="700" height="900"></canvas>
I am trying to fill the area between two lines in a line chart using Chart.js. Like this:
There is already an answer here, that explains how to extend chartjs to do this.
But I know this feature is now native in V2 (from this thread on the github issues page), the problem is I just can't find documentation referring to this.
Is there a section about this in the doc? Anyone know how to use this feature?
Thanks!
Make sure you import the 2.6.0 version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
Then follow the rules as described here: http://www.chartjs.org/docs/latest/charts/area.html
Below is an example, and how it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My two lines with colour between them</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="mychart" width="300" height="200"></canvas>
<script>
var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas)
var config = { //configure the chart
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: "Min",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: false, //no fill here
data: [5, 5, 3, 2]
},
{
label: "Max",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: '-1', //fill until previous dataset
data: [8, 7, 6, 5]
}]
},
options: {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
};
var chart = new Chart(ctx, config);
</script>
</body>
</html>
Setting fill property to +1 of a dataset will set the backgroundColor from this line to the next line in dataset.
datasets: [{
label: 'Systolic Guideline',
data: [],
fill: '+1',
borderColor: '#FFC108',
backgroundColor: 'rgba(255,193,8,0.2)'
},
{
label: 'Diastolic Guideline',
data: [],
fill: true,
borderColor: '#FFC108',
backgroundColor: 'rgba(0,0,0,0)'
}]
See this: https://www.chartjs.org/samples/latest/charts/area/line-datasets.html
Here is a small plugin that can do shading between any two dataset lines.
https://stackoverflow.com/a/41733045/852977