I am trying to create a horizontal bar chart using Chart.js. It uses 2 data sets. I
want them to start at value 0 in the centre and fan out to 100 in both directions.
In the example shown in the picture below, it does so. However, the value on the left is "-100". My question is how am i able to make the value become 100 instead.
Please refer to the picture as well as the link to the code below.
Horizontal Bar Chart
https://www.chartjs.org/docs/latest/samples/bar/horizontal.html
If I have understood well, you would like to have a dataset, going to the right, and the other one to left.
If true, you should:
set min:-100, max:100 and the ticks.callback, to return the absolute value of ticks in the x scale.
add another x scale (i.e. x2) with min:-100, max:100 and reverse: true. Furthermore this scale shouldn't be visible, therefore set also display: false.
set xAxisID property in the second dataset to the new scale (x2).
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: false,
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: false,
xAxisID: 'x2'
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
min: -100,
max: 100,
ticks: {
callback(value) {
return Math.abs(value);
}
}
},
x2: {
display: false,
min: -100,
max: 100,
reverse: true
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
Related
is there any options in chartjs to change baseline value from 0 to other number for example 50, i want use "fill" option and i want sin wave from 0 to 100
if i use -50 to 50 or -100 to +100 range, baseline is 0 and it is OK and work perfect but when i use 0 to 100 center not be 50 and be 0 and fill mode just colored all down part
change baseline value in chartjs from 0 to for example 50
Yes, there is {fill: {value:<value>}}.
(here is the link to the documentation)
Here a short demo, how I would do this:
const data = {
labels: ['E-commerce', 'Enterprise', 'Grey'],
datasets: [{
label: 'random testdata',
data: [12, 19, 5, 3, 3],
fill: {value: 12},
}],
};
const config = {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
}
};
new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px; width:350px;">
<canvas id="chart" ></canvas>
</div>
I should use the fill option, passing the value you want to have as base.
See documentation: https://www.chartjs.org/docs/latest/charts/area.html
In your use case, fill: {value: 50}
const config = {
type: 'line',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [50, 35, 45, 47, 21, 13, 27],
fill: {value: 20}
}]
},
options: {
responsive: true,
plugins: {
legend: false,
}
},
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, config);
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.2.1/dist/chart.umd.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600px" height="400px"/>
</div>
</body>
</html>
Hello I have stuck with add space between stacked bar, I mean I need to add space or margin or padding between bar color
this what I'm done with
and what I want is like this
as you can see there's is space between green, red and yellow bar
are possible to add it?
I've trying to add options.layout.padding but still not working
const borderRadius = 8;
const borderRadiusAllCorners = { topLeft: borderRadius, topRight: borderRadius, bottomLeft: borderRadius, bottomRight: borderRadius };
const labels = ['0%', '25%', '50%', '75%', '100%'];
const data = {
labels: labels,
datasets: [
{
label: 'LCP',
data: [
90,80,70
],
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'FID',
data: [
8,15,15
],
borderColor: 'yellow',
backgroundColor: 'yellow',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'CLS',
data: [
2,5,15
],
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
]
};
const ctx = $('#cwv-chart');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
elements: {
bar: {
borderRadius: 6,
borderWidth: 2,
}
},
scales: {
x: {
display: false,
stacked: true,
offset: true,
},
y: {
display: false,
stacked: true
}
},
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
}
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="cwv-chart" height="150"></canvas>
The options.layout.padding is just adding space around the chart area and not between data elements.
I'm doing something like that with a simple plugin, changing the base of the bar element, at runtime.
EDIT: the plugin has been updated in order to avoid bugs when chart hovering.
See snippet:
const ctx = document.getElementById("myChart");
const plugin = {
id: 'fillGaps',
beforeDatasetDraw(chart, args) {
if (args.index > 0 && chart.isDatasetVisible(args.index)) {
args.meta.data.forEach(function(item, i) {
const {width} = item.getProps(['width'], true);
item.base = item.x - width + 3;
});
}
}
};
const myChart = new Chart(ctx, {
type: 'bar',
plugins: [plugin],
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: false,
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: false,
}]
},
options: {
indexAxis: 'y',
//animation: false,
elements: {
bar: {
borderRadius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
},
}
},
scales: {
y: {
stacked: true,
},
x: {
stacked: true,
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I've got one data-set values not showing in dual-yAxes charting.
I've got the general Chart.js code working with dual data-sets and dual yAxes. however, one data set is not showing correctly on chart. the "Temp" values range between 66 and 78, but appear to be "off the chart" despite the min/max range values I use.
See my code here on JSFiddle
<div style="width:75%">
<canvas class=".content" id="myChart" ></canvas>
</div>
<Script>
var canvas = document.getElementById('myChart').getContext('2d');
// #ts-ignore
var myChart = new Chart(canvas, {
options: {
scales: {
yAxes: [
{
id: 'SG',
//type: 'linear',
position: 'left',
ticks:
{
min: 1,
max: 1.1
}
},
{
id: 'Temp',
//type: 'linear',
position: 'right',
ticks:
{
min: 32,
max: 100
}
}
]
}
},
type: 'bar', //not really needed, over-ridden below
data: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
datasets: [{
label: 'Gravity',
yAxesID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
//type: 'line',
label: 'Temp F',
yAxesID: 'Temp',
data: [78, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
}
});
</Script>
Maybe I'm missing something specific to dual-yAxes charting...
There is a spelling mistake replace yAxesID with yAxisID, and the dataset population should look like the below code or you can see the fiddle for your reference -> https://jsfiddle.net/69p7Lsth/1/
datasets: [{
label: 'Gravity',
yAxisID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
label: 'Temp F',
yAxisID: 'Temp',
data: [8, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
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 using chartjs lib to draw charts.
And I want to draw some simple, linear chart, but when do it some how the first point of the chart isn't shown correctly :
https://scr.hu/ALkPXP
It happends when the lowest data point x value have the same value as the minimum xAxes.
When I decrease minimum ax value it works correcty:
https://scr.hu/Gw4Lpy
My whole chart looks like :
const scatterChart2 = new Chart(this.canvas.nativeElement,
{
'type': 'line',
'data':
{
'datasets': [
{
'label': 'Scatter Dataset',
'data': [
{
x: 1,
y: 0,
}, {
x: 65,
y: 20,
}, {
x: 30,
y: 22,
}, {
x: 44,
y: 55,
}],
'fill': false,
'borderColor': 'rgb(75, 192, 192)'
}]
},
'options': {
scales: {
xAxes: [{
ticks: {
min: 1,
stepSize: 1
},
offset: true,
type: 'linear',
position: 'bottom'
}]
},
'showLines': true
}
});
}
And in HTML my Canvas looks like :
<div style="max-width: 1000px;max-height: 1000px;">
<canvas #canvas id="myChart" ></canvas>
</div>
How should I show first point correctly ?