Develop Reference

Style individual points from one dataset in Chart.js

I am trying to create a timeline using Chart.js.
My Goal is to have a single row that shows various icons/events that happened in a game.
By using a linechart and removing the lines, leaving only the points, you can place markers on the timeline.
You can display these points as custom images by assigning an image variable to the pointStyle attribute of the dataset.
With a single image this works perfectly fine, as you can see in the following snippet.
//Create the image
const img = new Image(20,20);
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Skull_Icon_%28Noun_Project%29.svg/1200px-Skull_Icon_%28Noun_Project%29.svg.png";
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Deaths",
data: [{x:"00:01:23", y: 0},{x:"00:03:41", y: 0},{x:"00:04:29", y: 0},{x:"00:05:35", y: 0},{x:"00:06:27", y: 0},{x:"00:07:07", y: 0},{x:"00:08:48", y: 0},{x:"00:09:31", y: 0}],
//Assign the image in the point Style attribute
pointStyle:img,
showLine: false,
fill: false,
tooltip: "Player Died",
borderColor: "#000000",
backgroundColor: "#000000"
},
]},
//The Rest is just styling
options: {
interaction:{
mode:'nearest'
},
tooltips:{
custom: function(tooltip){
if(!tooltip)return;
tooltip.displayColors = false;
},
callbacks:{
title: function(tooltipItem, data) {
return data.datasets[tooltipItem[0].datasetIndex]['tooltip'];
},
label: function(tooltipItem, data) {
return tooltipItem.xLabel;
}
}
},
legend: {
display: true
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'hh:mm:ss',
tooltipFormat: 'HH:mm:ss',
displayFormats: {
second: "HH:mm:ss"
},
unitStepSize: 30
},
ticks:{
fontColor: "white"
}
}],
yAxes: [{
ticks: {
display: false,
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="chart" height= "50px" style="background-color: rgb(200, 200, 200);"></canvas>
As you can see i am creating an Image(), pointing it to the source and assigning it as the pointStyle attribute of the dataset.
But with this method i need to create a new Dataset whenever i want to display another image.
For my purpose i need to be able to dynamically assign different images for every point.
That is why i looked into scriptables in Chart.js. On the documentation it is stated that you can use custom functions to return an image/styling for pointStyles.
https://www.chartjs.org/docs/latest/general/options.html
In the following snippet you can see my current code.
I moved the creation of the image to a custom function in the point Style attribute of the dataset. With this i will be able to select from more images later.
But for now i can not make it work with one image. So how can i make the function return an image, so that the styling works? With this i will later be able to select from multiple images. Or is there maybe another solution i did not come up with?
Thank you very much for your help.
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Deaths",
data: [{x:"00:01:23", y: 0},{x:"00:03:41", y: 0},{x:"00:04:29", y: 0},{x:"00:05:35", y: 0},{x:"00:06:27", y: 0},{x:"00:07:07", y: 0},{x:"00:08:48", y: 0},{x:"00:09:31", y: 0}],
//Try to create the image in a custom function
pointStyle: function(context){
var img = new Image(20,20);
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Skull_Icon_%28Noun_Project%29.svg/1200px-Skull_Icon_%28Noun_Project%29.svg.png";
return img;
},
showLine: false,
fill: false,
tooltip: "Player Died",
borderColor: "#000000",
backgroundColor: "#000000"
},
]},
options: {
interaction:{
mode:'nearest'
},
tooltips:{
custom: function(tooltip){
if(!tooltip)return;
tooltip.displayColors = false;
},
callbacks:{
title: function(tooltipItem, data) {
return data.datasets[tooltipItem[0].datasetIndex]['tooltip'];
},
label: function(tooltipItem, data) {
return tooltipItem.xLabel;
}
}
},
legend: {
display: true
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'hh:mm:ss',
tooltipFormat: 'HH:mm:ss',
displayFormats: {
second: "HH:mm:ss"
},
unitStepSize: 30
},
ticks:{
fontColor: "white"
}
}],
yAxes: [{
ticks: {
display: false,
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="chart" height= "50px" style="background-color: rgb(200, 200, 200);"></canvas>

You can add different images via an array.
//Create the image
const img = new Image(20, 20);
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Skull_Icon_%28Noun_Project%29.svg/1200px-Skull_Icon_%28Noun_Project%29.svg.png";
const img2 = new Image(20, 20);
img2.src = "https://pngimg.com/uploads/pacman/pacman_PNG21.png";
const img3 = new Image(20, 20);
img3.src = "https://pngimg.com/uploads/pacman/pacman_PNG70.png"
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Deaths",
data: [{
x: "00:01:23",
y: 0
}, {
x: "00:03:41",
y: 0
}, {
x: "00:04:29",
y: 0
}, {
x: "00:05:35",
y: 0
}, {
x: "00:06:27",
y: 0
}, {
x: "00:07:07",
y: 0
}, {
x: "00:08:48",
y: 0
}, {
x: "00:09:31",
y: 0
}],
//Assign the image in the point Style attribute
pointStyle: [img2, img, img3],
showLine: false,
fill: false,
tooltip: "Player Died",
borderColor: "#000000",
backgroundColor: "#000000"
}, ]
},
//The Rest is just styling
options: {
interaction: {
mode: 'nearest'
},
tooltips: {
custom: function(tooltip) {
if (!tooltip) return;
tooltip.displayColors = false;
},
callbacks: {
title: function(tooltipItem, data) {
return data.datasets[tooltipItem[0].datasetIndex]['tooltip'];
},
label: function(tooltipItem, data) {
return tooltipItem.xLabel;
}
}
},
legend: {
display: true
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'hh:mm:ss',
tooltipFormat: 'HH:mm:ss',
displayFormats: {
second: "HH:mm:ss"
},
unitStepSize: 30
},
ticks: {
fontColor: "white"
}
}],
yAxes: [{
ticks: {
display: false,
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="50px" style="background-color: rgb(200, 200, 200);"></canvas>
How you get the images to the array is up to you.
You can update it with something like this
function addimage(img) {
myChart.data.datasets[0].pointStyle.push(img);
myChart.update();
};
addimage(img2)
Of course you will want to add your images in some other dynamic way I’m sure but this should help.

How to add a vertical line on the end of the chart.js scatter graph

This is how options for my chart look like
options: {
legend: {
display: false
},
scales: {
xAxes: [
{
type: "time",
gridLines: {
display: false
},
ticks: {
padding: 15
}
}
],
yAxes: [
{
ticks: {
padding: 22,
min: 1,
max: 5,
stepSize: 1
},
position: "left",
gridLines: {
drawTicks: false
}
}
]
}
}
as you can see there is an option
gridLines: {
display: false
},
because of this there is no vertical lines on the chart.
What I want to do is to add only one vertical line on the end of the chart(right side of the chart)
Here is my live example https://codesandbox.io/s/line-chart-with-vanilla-js-and-chartjs-pi9fn?file=/src/index.js

This can be solved as follows:
Define data.labels in the chart configuration. Given your data, this could be done by extracting the x values of of the data objects using Array.map().
const labels = data.map(o => o.x);
Then you need to adapt xAxis.ticks in order to instruct Chart.js that ticks (including grid lines) have to be generated from user given labels (see Tick Source from Chart.js documentation).
ticks: {
source: 'labels'
}
Further you have to change the definition of xAxis.gridLines. Make them displayed again and define lineWidth instead. This should be an array of numbers that specify the stroke width of individual grid lines. Basically all 0 except 1 for the last number.
gridLines: {
lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
}
Please have a look at the runnable code snippet below.
const data = [
{ x: "1-01", y: 1 },
{ x: "1-07", y: 3 },
{ x: "1-14", y: 2 },
{ x: "1-21", y: 4 },
{ x: "1-28", y: 5 },
{ x: "2-04", y: 1 }
];
const labels = data.map(o => o.x);
new Chart('line-chart', {
type: "scatter",
responsive: true,
maintainAspectRatio: false,
data: {
labels: labels,
datasets: [
{
data: data,
label: "A",
showLine: true,
fill: false,
borderWidth: 4,
pointRadius: 5,
tension: 0,
backgroundColor: "#ffffff",
borderColor: "red"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [
{
type: 'time',
unit: 'day',
time: {
parser: 'M-D'
},
gridLines: {
lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
},
ticks: {
source: 'labels',
padding: 15
}
}
],
yAxes: [
{
ticks: {
padding: 22,
min: 1,
max: 5,
stepSize: 1
},
position: "left",
gridLines: {
drawTicks: false
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart" height="90"></canvas>

Chart.js x-axes not working?

I'm trying to make a chart that displays data. I can't seem to get the x axis to work. If I add type:'linear', then it doesn't display the data, but the x-axes displays. If I don't add that, then the data gets displayed, but the x axes doesn't work.
var chart = new Chart(document.getElementById("graph"),
{
type: 'line',
data: {
//labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
display: true,
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
scaleShowValues: true,
responsive: false,
title: {
display: true,
text: 'World population (in millions)'
},
scales: {
yAxes: [
{
type: 'linear',
ticks: {
beginAtZero:true,
min: -10,
max: 110,
}
}
],
xAxes: [{
display: true,
position: 'bottom',
//type: 'linear',
ticks: {
display:true,
min: 0,
max: 3000,
stepSize: 10,
autoSkip: true
}
}
]
}
}
});

The data does not fit the type of the chart, there should be two coordinates 'x' and 'y'. Line chart must have data like:
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]

And delete this rows: min: -10,
max: 110,
That way the graph looks more beautiful and knows how to adjust the Y values itself.

Chart JS: Ignoring x values and putting point data on first available labels

I am making a line chart in chart.js, and am having an issue where I am trying to plot point data on the line but it is ignoring the x values I am giving, and instead putting them on the first available label.
this.myLineChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: [0,2,4,6,8,10],
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
The result I get is this:
But instead I would like this line to be at the x values 2.5 and 3.5, so that it lies in between the 2 and 4 labels.
What should I change in the code to make it behave as I want?

In that case, you don't need to use labels array. Instead set x-axis' type to linear and minimum and maximum value for x-axis' ticks (perhaps stepSize as well) in your chart options, like so :
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2
}
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
myLineChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2 //interval between ticks
}
}],
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

How to Remove axis Lines from chart in chart js

I drawn a chart using chart js like below
In this above chart i want to make a line thicker ( Pink Marked ) like other lines and also i want to remove x axis line ( Green Marked ). How can i do this please Help me.
Please see the fiddle Here Live Chart
var ganttchart = document.getElementById('bar-chart');
new Chart(ganttchart, {
type: 'line',
data: {
datasets: [
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 10,
y: 3
}, {
x: 13,
y: 3
}
]
}
]
},
options: {
legend : {
display : false
},
scales: {
xAxes: [{
type: 'linear',
position: 'top',
gridLines: {
lineWidth:20
},
ticks : {
beginAtzero :true,
stepSize : 1
}
}],
yAxes : [{
gridLines: {
display:false,
},
ticks : {
beginAtZero :true,
max : 10,
display:false
}
}]
},
animation: {
duration: 0
},
hover: {animationDuration: 0}
}
});

You can find axes config options currently here: Axes - Chart.js Documentation
Axes config options has a global field display with the following description:
If set to false the axis is hidden from view. Overrides gridLines.display, scaleLabel.display, and ticks.display.
Here is how I have implemented it:
public chartOptions = {
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}]
}
};

Just change border to false.
const config =
{
type: 'line',
data,
options: {
scales:{
y: {
beginAtZero: false,
border:{
display:false
}
},
x: {
beginAtZero: false,
border:{
display:false
}
}
}
}
}
}