Develop Reference

charts.js ticks adding padding to themselves (no to canvas or frame)

const ctx = document.getElementById('myChart').getContext('2d');
let point = new Image(30, 30);
point.src = 'yellow_pointer.png';
let gradient = ctx.createLinearGradient(0, 0, 0, 600);
gradient.addColorStop(1, 'rgba(251,189,8, 0.0005)');
gradient.addColorStop(0, 'rgba(255, 191, 8)');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['30Days', '90Days', '180Days', '', '365Days'],
datasets: [{
lineTension: 0.3,
label: '',
data: [2, 3, 6, 12, 24],
backgroundColor: gradient,
borderColor:'#fccc69',
borderWidth:5,
pointBorderColor: 'transparent',
fill: true,
pointStyle: [point,point,point,'none',point],
pointRadius: 10,
pointHitRadius: 25,
hoverWidth: 2,
pointBackgroundColor: 'transparent',
pointPaddingLeft: 50,
},
{
lineTension: 0.3,
label: '',
borderColor: 'rgba(0, 0, 0, 0.3)',
borderDash: [15],
data: [5, 7, 12, 24, 40],
backgroundColor: 'transparent',
pointStyle: 'none',
pointBackgroundColor: 'transparent',
pointBorderColor:'transparent'
},
]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins:{
legend:{
display: false,
}
},
scales: {
y: {
ticks:{
display: false,
},
},
x: {
ticks: {
type: 'time',
autoSkip: false,
font: {
family: 'Montserrat',
size: 20,
color: 'black',
},
},
},
}
}
});
i'd like exact sime of it
and here is mine:
days should be in a ratio of 356 and i cant handle it
which config setting for ticks handles this i tried stepsize bu it seems like it didnt work
at right there is estimated section as you see can it be added by js or do i have to use css this one is css form

Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?

the version of Chart JS is 3.7.0
I am looking for a way to make my chart's points look from this:
to something like this:
I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:
Is there an option or a way to achieve what Im looking for? (Check the second picture).
Thanks in advance!
My chart's javascript:
const data = {
datasets: [
{
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
data: [
{ x: 'Dec 27', y: 0.204 },
{ x: '01:00', y: 0.234 },
{ x: '02:00', y: 0.274 },
{ x: '03:00', y: 0.234 },
{ x: '04:00', y: 0.304 },
{ x: 'Dec 28', y: 0.506 },
],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#2d84b4',
pointHoverBorderColor: '#2d84b4',
},
],
};
const config = {
type: 'line',
data: data,
options: {
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
//Do not display legend.
legend: {
display: false,
},
},
scales: {
xAxes: {
stacked: true,
ticks: {
stepSize: 2,
},
grid: {
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: true,
tickLength: 4,
type: 'time',
},
},
yAxes: {
grid: {
drawBorder: false,
drawTicks: false,
},
},
},
elements: {
point: {
radius: 5,
},
},
},
};
// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});
//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;

The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.
To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBorderColor: '#2d84b4',
hoverRadius: 10,
pointHoverBorderWidth: 2
}]
},
options: {}
}
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/3.7.0/chart.js"></script>
</body>

Grouped bar chart with label in Chart.js

I need to recreate a chart very similar to this one:
While researching I found this example:
https://codepen.io/bencarmichael/pen/XeYJXJ
datasets: [
{
label: "American Express",
backgroundColor: "pink",
borderColor: "red",
borderWidth: 1,
data: [3, 5, 6, 7,3, 5, 6, 7] // I need labels on this values
}
]
It shows grouped bar charts. But it's lacking a label per bar. If it's not possible on Chart.js, it can be any other library.

use this code
View result in full screen mode
this is copied from the example you provided in you Question
var barChartData = {
labels: [
"Absence of OB",
"Closeness",
"Credibility",
"Heritage",
"M Disclosure",
"Provenance",
"Reliability",
"Transparency"
],
datasets: [
{
label: "American Express",
backgroundColor: "pink",
borderColor: "red",
borderWidth: 1,
data: [3, 5, 6, 7,3, 5, 6, 7],
},
{
label: "Mastercard",
backgroundColor: "lightblue",
borderColor: "blue",
borderWidth: 1,
data: [4, 7, 3, 6, 10,7,4,6]
},
{
label: "Paypal",
backgroundColor: "lightgreen",
borderColor: "green",
borderWidth: 1,
data: [10,7,4,6,9,7,3,10]
},
{
label: "Visa",
backgroundColor: "yellow",
borderColor: "orange",
borderWidth: 1,
data: [6,9,7,3,10,7,4,6]
}
]
};
var chartOptions = {
responsive: true,
legend: {
position: "top"
},
"hover": {
"animationDuration": 0
},
legend: {
"display": false
},
tooltips: {
"enabled": true
},
"animation": {
"duration": 1,
"onComplete": function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
debugger
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.font = '10pt Verdana';
ctx.save();
ctx.translate(0,500);
ctx.rotate(-0.5*Math.PI);
var rText = 'My test value ='+data ;
ctx.fillText(rText , 90, bar._model.x+5);
ctx.restore();
});
});
}
},
title: {
display: true,
text: "Chart.js Bar Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: "bar",
data: barChartData,
options: chartOptions
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>

How to add an end line to my graph using Chart.js?

I have drawn a Chart using Chart.js. It does not automatically draw an end line at the end(right side) of the Chart:
I have used plugin code to hide the overlaying vertical lines which are drawn by Chartjs automatically. I could not find another way to hide those. Here is the code which describes the Chart.
function getHydrationOverviewChart(elementID) {
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
x_axis.ticks.forEach(function(label, index) {
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
});
}
});
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
borderWidth: 2,
borderColor: "#5d5d5d",
pointBorderColor: "#5d5d5d",
pointBackgroundColor: "#5d5d5d",
pointBorderWidth: 5,
type: 'line',
data: [26, 26, 33, 28, 30],
fill: false,
lineTension: 0
},
{
borderWidth: 3,
pointBorderColor: "#b8b8b8",
pointBackgroundColor: "#b8b8b8",
pointBorderWidth: 10,
type: 'line',
data: [26, 26, 29, 28, 29],
fill: false,
lineTension: 0
},
{
data: [0, 0, 0, 0, 0],
fill: false,
lineTension: 0
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
hover: {mode: null},
legend: {
display: false
},
tooltips: {enabled: false},
hover: {mode: null},
scales: {
xAxes: [{
gridLines: {
// drawBorder: false,
},
}],
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
max: 60,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById(elementID).getContext('2d');
new Chart(ctx, options);
}
Does anybody know how I can add this vertical endline?

This can be accomplished using the following chart plugin :
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
for (i = 0; i <= x_axis.ticks.length; i++) {
var x = i === x_axis.ticks.length ?
x_axis.right :
x_axis.getPixelForValue(x_axis.ticks[i]);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
}
}
});
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
for (i = 0; i <= x_axis.ticks.length; i++) {
var x = i === x_axis.ticks.length ?
x_axis.right :
x_axis.getPixelForValue(x_axis.ticks[i]);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
}
}
});
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
borderWidth: 2,
borderColor: "#5d5d5d",
pointBorderColor: "#5d5d5d",
pointBackgroundColor: "#5d5d5d",
pointBorderWidth: 5,
type: 'line',
data: [26, 26, 33, 28, 30],
fill: false,
lineTension: 0
}, {
borderWidth: 3,
pointBorderColor: "#b8b8b8",
pointBackgroundColor: "#b8b8b8",
pointBorderWidth: 10,
type: 'line',
data: [26, 26, 29, 28, 29],
fill: false,
lineTension: 0
}, {
data: [0, 0, 0, 0, 0],
fill: false,
lineTension: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
hover: {
mode: null
},
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
gridLines: {
// drawBorder: false,
},
}],
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
max: 60,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas" height="400"></canvas>

How to fix the distance between horizontal points (x-axis) in chartJS

Problem: Hi all! i am using chart.js to draw the charts. chart is a dynamic sometimes shows 10 points and sometimes can be more than thousand i have applied a panel successfully so that my points can be shown at some distance to read them easily.
Right now i want to know if there is any option to set the distance between points in x-axis grid. right now it automatically adjust the points.
What i tried:
i tried to do the stepsize and scalewidth by searching other stackoverflow answers but did not succeed. Any kind of help would be much appreciated.
P.S: i m using chart.js2
This is my chartjs dataset
var data = {
labels: data.graph_date,
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(255, 0, 0,1)",
borderColor: "rgba(255, 0, 0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 0, 0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
pointHoverBorderColor: "rgba(255, 0, 0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data.assay_value,
spanGaps: false
},var options = {
responsive: false,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
scales:{
yAxes:[{
ticks:{
min:graph_min
}
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
};
if(new_chart[ctx.canvas.id] != null)
new_chart[ctx.canvas.id].destroy();
new_chart[ctx.canvas.id] =new Chart(ctx, {
type: 'line',
data: data,
options: options
});
In x-axis there is data like this
[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]
in y-axis data is like this
[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]

The way to control distance between points it to set the X and Y axis with a min, max, and step size so that they never change regardless of the number of points that are in the chart.
Here is an example that sets the scales so that they will never change. Regardless of how many points appear on the chart everything will stay the same.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
showLine: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Fixed X and Y Axis',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
}
}],
yAxes: [{
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
}
}]
}
}
});
Here is a codepen example that demonstrates what this looks like