We Keep Coding

Chart.js Grace Behavior

I have several charts that render as expected using the grace option on the y axis. However, one chart is misbehaving [8-day pressure] and I can't spot the cause of the rendering difference. Removing the annotation line at y = 1015 makes no difference. Changing the grace value from 5% to 5 shows the same behavior (slightly less compacted). Both of the charts shown below import two plugins (included below).
Working Grace (10%)
Hinky Grace (5%)
No Grace
Render Code
Chart.register(annotationPlugin);
Chart.register(ChartDataLabels);
...
renderChart() {
let ctx = document.getElementById(this.id).getContext('2d');
this.pressureChart = new Chart(ctx, {
options: {
layout: {
padding: {
right: 20,
}
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: '#888888',
font: {
weight: 'bold'
},
},
annotation: {
annotations: {
line1: {
type: 'line',
label: {
color: '#888888',
enabled: true,
content: 'normal',
font: {
style: 'normal',
size: 9,
position: 'start',
},
},
yMin: 1015,
yMax: 1015,
borderColor: 'rgb(255, 255, 0, 0.4)',
borderWidth: 1,
borderDash: [5, 5],
adjustScaleRange: false,
},
}
},
tooltip: {
position: 'nearest',
},
legend: {
display: false,
},
},
responsive: true,
scales: {
x: {
categoryPercentage: 0.5,
stacked: false,
fontSize: 5,
grid: {
color: "#333333",
display: true,
borderDash: [1, 2],
},
},
y: {
// grace: '5%',
grid: {
color: "#333333",
display: true,
borderDash: [1, 2],
},
ticks: {
stepSize: 10,
},
barPercentage: 0,
categoryPercentage: 0,
fontSize: 5,
stacked: false,
position: 'left',
},
},
maintainAspectRatio: false,
animation: {
duration: this.animation,
easing: 'easeInOutQuart'
}
},
data: {
labels: [this.weather['d01_day_short'], this.weather['d02_day_short'], this.weather['d03_day_short'],
this.weather['d04_day_short'], this.weather['d05_day_short'], this.weather['d06_day_short'],
this.weather['d07_day_short'], this.weather['d08_day_short'],
],
datasets: [
{
type: 'line',
backgroundColor: "rgba(200, 200, 0, 0.2)",
borderColor: "rgba(200, 200, 0, 1)",
borderRadius: 3,
data: [this.weather['d01_pressure'], this.weather['d02_pressure'], this.weather['d03_pressure'],
this.weather['d04_pressure'], this.weather['d05_pressure'], this.weather['d06_pressure'],
this.weather['d07_pressure'], this.weather['d08_pressure'],
],
hoverBackgroundColor: "rgba(200, 200, 0, 0.5)",
label: "",
yAxisID: 'y',
datalabels: {
align: 'end',
}
},
]
},
},
Chart.defaults.elements.point.radius = 0,
Chart.defaults.elements.point.hoverRadius = 0,
Chart.defaults.elements.point.pointStyle = 'triangle',
Chart.defaults.elements.bar.borderWidth = 1,
Chart.defaults.elements.line.borderWidth = 1,
);
}
Obs
["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",]
["1025", "1022", "1025", "1026", "1022", "1018", "1020", "1030",]
Package
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.2"
"chart.js": "^3.9.1",
"chartjs-plugin-annotation": "^2.0.1",
"chartjs-plugin-datalabels": "^2.1.0",

Chartjs chart with only one axis

Chartjs one line chart without grid, axis and tick labels.
I want to draw chart something like above.
I don't want axes labels, tick labels and grid lines, only one line which will progress on the right as data (X values) added to the chart. I want to display labels on the dots added to the chart. Can we have only one axis (X) in the chart?
I did try below:
https://jsfiddle.net/Lxya0u98/2/
My data set is as below:
{
data: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}],
showLine: true,
borderWidth: 1.5,
borderColor: "blue",
pointBackgroundColor: "blue",
pointBorderColor: "blue",
pointRadius: 5,
}

If you define options ticks.display: false together with gridLines.display: false on both axes, it should work fine.
Please take a look at below sample code and see how it works.
new Chart('line-chart', {
type: "line",
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white",
pointBorderWidth: 1,
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
pointHoverRadius: 4,
}],
},
options: {
plugins: {
datalabels: {
align: 'top',
formatter: function(value, context) {
return context.dataIndex + 1;
}
}
},
layout: {
padding: {
right: 10
}
},
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false,
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="line-chart" height="30"></canvas>

According to the comment from User7723337, the plugin chartjs-plugin-datalabels doesn't work with Chart.js version 3.0.0-beta.7.
As an alternative, you can draw the data labels directly on the canvas using the Plugin Core API. The API offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw hook together with CanvasRenderingContext2D.
Note that I linked Plugin Core API with the Chart.js v2.x documentation because I couldn't find a corresponding section for v3.x. Apparently however, this is still also working with v3.x.
Please take a look at below code that uses Chart.js version 3.0.0-beta.7.
new Chart('line-chart', {
type: "line",
plugins: [{
afterDraw: chart => {
var ctx = chart.ctx;
ctx.save();
var xAxis = chart.scales['x'];
var yAxis = chart.scales['y'];
chart.data.labels.forEach((l, i) => {
var x = xAxis.getPixelForTick(i);
var y = yAxis.getPixelForValue(0);
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(l, x, y - 14);
});
ctx.restore();
}
}],
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white",
pointBorderWidth: 1,
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
pointHoverRadius: 4,
}],
},
options: {
layout: {
padding: {
left: 10,
right: 10
}
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
scales: {
y: {
display: false,
},
x: {
display: false,
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.7/chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>

Chart.js radar chart ticks are hidden behind the graph

Is it possible to bring the "ticks" of the Chart.js radar graph to the foreground so that they would be on top of the graph itself?
I don't see anything related to this issue in the official documentation.
Method that renders this:
const chart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
datasets: [
{
label: 'Points',
pointRotation: 45,
backgroundColor: [
color(this.chartColors.grey).rgbString(),
color(this.chartColors.green).rgbString(),
color(this.chartColors.blue).rgbString(),
color(this.chartColors.yellow).rgbString(),
],
data: [0, 0, 0, 0],
borderWidth: 0,
pointBackgroundColor: 'rgba(0, 0, 0, 1)'
}
],
},
options: {
responsive: true,
animation: {
animateRotate: true
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
scale: {
ticks: {
fontColor: '#000000',
mirror: true,
}
},
legend: {
position: 'top'
},
}
});
One workaround is to make these fill colours transparent like so:
color(this.chartColors.yellow).alpha(0.5).rgbString(),
...this way the ticks would be somewhat acceptably visible. However, I'd rather have them fully saturated. Thanks in advance for any suggestions.

You can define the scale.ticks.z option as as documented here.
scale: {
ticks: {
...
z: 1
}
},
z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.
Please have a look at your amended code below:
const chart = new Chart('myChart', {
type: 'polarArea',
data: {
labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
datasets: [
{
label: 'Points',
pointRotation: 45,
backgroundColor: ['grey', 'green', 'blue', 'yellow'],
data: [3, 4, 8, 9],
borderWidth: 0,
pointBackgroundColor: 'rgba(0, 0, 0, 1)'
}
]
},
options: {
responsive: true,
animation: {
animateRotate: true
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
scale: {
ticks: {
fontColor: '#000000',
mirror: true,
z: 1
}
},
legend: {
position: 'top'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

chart js how to fill legend box with colour

I'm using Chart.js for line charts and I have the legend as below.
The problem is that the legend only has an outline color, I want the legend box to have the whole thing colored. I haven't found anything in the documentation to see why mine only has the border. I'm at a bit of a loss, here's an example of my setup:
var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
type: 'line',
data: {
labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
datasets: [{
label: 'Ubuntu-based',
fill: true,
data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
borderColor: '#a6cee3',
borderWidth: 1
}, {
label: 'Arch-based',
fill: true,
data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
borderColor: '#1f78b4',
borderWidth: 1
}, {
label: 'Solus',
fill: true,
data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
borderColor: '#6a3d9a',
borderWidth: 1
}]
},
options: {
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Percentage of users'
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var label = data.datasets[tooltipItem.datasetIndex].label;
return label + ' ' + value + '%';
}
},
},
}
});

You have to set the backgroundColor property for each of your datasets as well, as that is correspondent to legend box­'s fill color.
...
datasets: [{
label: 'Ubuntu-based',
fill: true,
data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
backgroundColor: '#a6cee3',
borderColor: '#a6cee3',
borderWidth: 1
}, {
label: 'Arch-based',
fill: true,
data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
backgroundColor: '#1f78b4',
borderColor: '#1f78b4',
borderWidth: 1
}, {
label: 'Solus',
fill: true,
data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
backgroundColor: '#6a3d9a',
borderColor: '#6a3d9a',
borderWidth: 1
}]
...

var ct = document.getElementById('myChart').getContext('2d');
var Chart = new Chart(ct, {
type: 'line',
data: {
datasets: [{
label: 'test',
data:[1,10],
backgroundColor: "rgb(0, 0, 0, 0)",
borderColor: "rgb(0, 0, 255)",
pointBackgroundColor: "rgb(0, 0, 255)",
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
},
yAxes: [{
scaleLabel: {
display: true,
labelString: 'test'
}
}]
}
},
plugins: [{
beforeDraw: function(c) {
var legends = c.legend.legendItems;
legends.forEach(function(e) {
e.fillStyle = 'red';
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>

Chart.js configuring x axis so that the spaces are not always equal

createLineChart() {
this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: [10, 11, 17, 18, 19, 23],
datasets: [
{
fill: true,
backgroundColor: '#C4CEE5',
label: 'recorded values',
borderColor: '#C4CEE5',
pointBorderColor: '#ffff',
pointBackgroundColor: '#ffff',
hoverBackgroundColor: '#C4CEE5',
pointRadius: 7,
borderCapStyle: 'square',
borderJoinStyle: 'round',
borderWidth: 1.5,
lineTension: 0,
data: [23, 34, 45, 12, 45, 65],
borderDash: [],
borderDashOffset: 0.0,
spanGaps: false,
}]
},
options : {
legend: {
display: false,
position: 'top',
fullWidth: true,
},
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
suggestMax: max,
maxTicksLimit: 4,
beginAtZero: true,
padding: 30
},
}],
xAxes: [{
ticks: {
min: 0,
maxTicksLimit: 5,
autoSkip: false,
beginAtZero: true,
},
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM D'
},
},
gridLines : {
display : false,
drawBorder: false,
color: 'transparent',
},
}]
},
},
});
};
I have created a chart.js line chart where the values on the x axis are dates. I think by default, chart.js plots data with an equal amount of distance between the points regardless of the value of the data.
I would like it so there is a large space in the chart if the dates are further apart.
I have tried using chart-scatter the plugin for chart.js but have not had much luck as I am using ionic/angular but if you have any experience with it that would be great!
What I would like the chart to look like with more space depending on the x-axis value: