I am looking to achieve the following with ChartJS but not sure if its actually possible? I need the graph to start at 0 but in effect my bars won't always start at the bottom of the chart (they may but in effect I need a BarStart and a BarEnd). Is it possible to offset them to achieve the below?
This can be accomplished since Chart.js v2.9.0, which supports floating bars. Individual bars can since be specified with the syntax [min, max].
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
type: 'bar',
label: 'Green Bars',
backgroundColor: 'green',
data: [[3, 9.5],[2, 8.5],[4, 7],[1.5, 5.5],[3, 6.5],[3, 8.5],[4, 9]],
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear',
ticks: {
min: 0,
max: 10,
stepSize: 1
}
}],
}
}
});
canvas {
max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="10"></canvas>
Related
I have this chart, starting at 0 and I want the Y axis to begin at 20. It surprises me how there is nothing related to this in the official ChartJS docs. Is this possible in any way?
I have tried several ways to do it, eg. with ticks or min value and so on but nothing worked.
The application is written in Nuxt3 and the ChartJS library used is vue-chart-3.
const options = computed(() => ({
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
}
}));
const chartData = computed(() => ({
labels: ['Provider'],
datasets: [
{
data: [selectedDataset.value?.score.uncustomized],
backgroundColor: ['#00b7c4'],
},
{
data: [selectedDataset.value?.score.difference],
backgroundColor: ['#204992'],
},
],
}));
const { barChartProps, barChartRef } = useBarChart({
chartData,
options,
});
Any help would be appreciated.
If you want the axis to start at a given number you need to use the min property:
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: {
y: {
min: 6
}
}
}
}
const 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.7.1/chart.js"></script>
</body>
I'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed.
I have achieved this functionality by adding this to my Line graph config;
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
borderDash: [2],
borderDashOffset: [2],
color: 'rgba(0, 0, 0, 0.04)',
drawBorder: false,
drawTicks: false,
}
}]
}
However, when I do this, it randomly adds another axis to my chart with completely bogus values. I want to remove this axis and keep the original but also keep the gridLines config.
You can set the defaults for this. You can set it in the scale default so it does it for all the chart types and scales. If you specifically want to hide the X axis gridLines only you need to set it on chart type level.
Chart.defaults.scale.gridLines.display = false // hides all the gridLines in all charts for all axes
Chart.defaults.line.scales.xAxes[0].gridLines = {
display: false
} // Hides only the X axes gridLines in all line charts
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
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
How can I change the bar width? I mean, the width from the bar I could change, but not this:
The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.
To find out about the relationship between barPercentage and categoryPercentage, see here.
In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas as follows:
<canvas id="canvas" height="40"></canvas>
Please have a look at the following code snippet.
new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: ['A', 'B'],
datasets: [{
label: 'data',
data: [15, 8],
backgroundColor: 'rgba(0, 0, 255, 0.2)',
borderColor: 'rgb(0, 0, 255)',
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
display: false
},
title: {
display: false
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="40"></canvas>
It seems as though the last date label is getting cutoff on my chart here in chart.js. There should be a data point for 2018.
When researching it I've seen it suggested to add layout padding.
I tried that but it disables the chart entirely. Anyone have an alternative solution or an idea on why my layout padding does not work?
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dollar.years,
datasets: [
{label: 'Cdn dollar in cents',
data: dollar.vals,
borderColor: 'rgb(153,222,101)',
backgroundColor: 'rgb(153,222,101, 0.2)',
pointRadius: 0,
borderWidth: 6,
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
labels: {
padding:1
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 5,
stepSize: 1
}
}],
xAxes: [{
type: "time",
time: {
unit: "year",
tooltipFormat: "YYYY"
},
ticks: {
display: true,
labelOffset: -1,
maxTicksLimit: 5,
drawOnChartArea: false,
autoSkip: false,
maxRotation: 0,
minRotation: 0,
padding: 5
},
}],
}
}
});
}
The option layout.padding work as below code snippet illustrates. You however need to carefully choose the values (number of pixels) in order to not completely hide the chart area.
I would however rather define xAxes.ticks.max to make sure the tick for 2018 is shown even if data would be available up to 2017 only.
const years = [];
const vals = [];
for (let year = 1968; year <= 2018; year++) {
years.push(year.toString());
vals.push(Math.floor(Math.random() * 3) + 1);
}
var myChart = new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: years,
datasets: [{
label: 'Cdn dollar in cents',
data: vals,
borderColor: 'rgb(153,222,101)',
backgroundColor: 'rgb(153,222,101, 0.2)',
pointRadius: 0,
borderWidth: 6
}]
},
options: {
responsive: true,
layout: {
padding: {
left: 0,
right: 100,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 4,
stepSize: 1
}
}],
xAxes: [{
type: "time",
time: {
parser: 'YYYY',
unit: "year",
tooltipFormat: "YYYY"
},
ticks: {
max: "2018",
maxTicksLimit: 5,
maxRotation: 0
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>
I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the single digits) and the best result is 1.
How can I invert the second y-axis so that 1 is at the top of the chart?
(I will try to find a solution myself, but at 5k+ lines in chart.js, it might take a while )
Thanks ^_^
Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become
{
type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
ticks: {
reverse: true
},
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
Here it is in action https://jsfiddle.net/nwc8ys34/15/
Using v 2.7.0, and the following seems to work:
options: {
scales: {
yAxes: [{
ticks: {
reverse: true,
}
}]
}
}
In v3 the scale configs have been changed so the desired behaviour can be accomplished like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [40, 80, 100, 70, 60, 80],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
scales: {
y: {},
y2: {
position: 'right',
reverse: true
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
Chart.js 4:
datasets: [{
label: "Strength",
yAxisID: "y1",
data: mappedData.sigStrength
}, {
label: "Bars",
yAxisID: "y2",
data: mappedData.sigBars
}]
scales: {
y1: {
type: "linear",
display: true,
position: "left",
reverse: true
},
y2: {
type: "linear",
display: true,
position: "right",
ticks: {
stepSize: 1
}
}
},