We Keep Coding

How do you plot scatter graph with chart.js

I am trying to figure out how to plot a scatter graph with chart.js the data I am trying to plot is randomly generated where dates is a list of datetime.now() objects and prices is a list of float numbers
dates = [datetime.now().strftime("%Y-%m-%d") for i in range(10)]
var dates_ = {{dates|tojson}}
var prices_ = {{prices|tojson}}
function parse_data(dates , prices)
{
console.log(dates.length , prices.length)
var tmp = [];
for (let i = 0; i < dates.length; i++)
{
var x;
var y;
tmp[i] = {x: dates.at(i), y: prices.at(i)};
}
return tmp;
}
var data_ = parse_data(dates_, prices_);
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
lablel: "some_data",
data: data_}]
});
converting the dates to float numbers does the job but it shows the dates as number and it is not that good looking

You can define your x-axis as follows
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
Further information can be found at the Chart.js documentation here and in the Chart.js samples here.
Note that I use chartjs-adapter-moment together with moment to make this work. The formats for parsing and displaying time values as desired can be found here.
Please take a look at your amended code and see how it works.
var test = [
{ x: "2022-1-8", y: 950 },
{ x: "2022-1-9", y: 1100 },
{ x: "2022-1-10", y: 990 },
{ x: "2022-1-12", y: 1250 },
{ x: "2022-1-13", y: 1050 }
];
var chart = new Chart('chart-line', {
type: 'scatter',
data: {
datasets: [{
data: test,
label: 'buys',
borderColor: "#3e95cd"
}]
},
options: {
responsive: false,
scales: {
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0"></script>
<canvas id="chart-line" height="200"></canvas>

The scatter chart uses a line chart internally but changes it so the showLine property becomes false and both axis are set to linear.
So you can just set the showLine property to false in your dataset and use a line chart.

const data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
label: 'Dataset 1',
data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:1}, {x:5, y:8}, {x:6, y:8}, {x:7, y:2}, {x:8, y:2}, {x:9, y:3}, {x:10, y:5}, {x:11, y:7}, {x:12, y:1}]
}]
}
const config = {
type: 'scatter',
data,
options: {
responsive: true,
maintainAspectRatio: false,
},
}
const $canvas = document.getElementById('chart')
const chart = new Chart($canvas, config)
<div class="wrapper" style="width: 98vw; height:180px">
<canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

Dynamically last 3 month Filter in Table or Graph

Right now, I manually filter the last 3 months by labels: ["JAN", "FEB", "MAR"],
I need dyanamically the last 3 months should be filtered every month. How can this be done?
This is my typescript code
HTML
<div>
<canvas id="myChart" width="400" height="300"></canvas>
</div>
TS
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, {
type: 'bar',
//type: 'doughnut',
data: {
// labels: ["Sold", "Booked", "Unsold"],
// labels: this.barchartLables,
labels: ["JAN", "FEB", "MAR"],
datasets: [{
label: 'Total Expenditure.',
//data: this.barchartdata,
data: [2517453, 2617453, 3917453],
//backgroundColor: ["red", , , , , , , , "blue"],
backgroundColor: [
'#ec6666',
'#78d1dd',
'#147ad6'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
responsive: false,
display: true
}
});

you can use moment js library for this purpose
like you can use moment subtract method for last any month
moment().subtract(1, 'month')//for last month
moment().subtract(2, 'month') // for second last month
moment().subtract(3, 'month') // for the third one

Chart.js - draw an arbitrary point with tooltip

I've implemented the technique described in this question to render vertical lines on my chart to show key dates when something important happened.
However, the text describing these events can be quite long, so just drawing text on the canvas isn't a good solution.
Is there some way to use the chart.js API to draw an invisible point on the chart (at the top of the line) which will become interactive and show a tooltip when the mouse hovers over it?
As far as I can see, only data points will show tooltips. I attempted to add another series to contain the lines data, but without much success - it also created a legend for this series, which I don't want. I set the values to 9999 to try to get them to appear at the top of the canvas, but this did not work and seems like a hack.

You could add a second dataset that contains a single value at the x-position where the vertical line should be drawn, its value should correspond to the highest value of the first dataset. To make the point invisible, define transparent background and border colors using 'rgba(0,0,0,0)'.
{
data: [null, null, 12],
pointRadius: 10,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)'
}
To only display the legend label of the relevant dataset, you need to define a legend.labels.filter function.
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex == 0
}
},
Further we need to define some tooltip.callback functions to show desired data in the tooltips.
Please take a look at below runnable code snippet and see how it works. This code uses the latest stable version of Chart.js (currently 2.9.3).
new Chart('canvas', {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
var lineAtIndex = chart.data.datasets[0].lineAtIndex;
var x = xAxis.getPixelForTick(lineAtIndex);
ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(x, yAxis.bottom);
ctx.lineTo(x, yAxis.top);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
label: 'My Dataset',
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1],
lineAtIndex: 2,
lineTooltip: ['This is', 'a multi-line', 'tooltip']
},
{
data: [null, null, 12],
pointRadius: 10,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)'
}
]
},
options: {
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex == 0
}
},
tooltips: {
callbacks: {
title: (tooltipItems, data) => {
if (tooltipItems[0].datasetIndex == 0) {
return data.labels[tooltipItems[0].index];
}
return data.datasets[0].lineTooltip;
},
label: (tooltipItems, data) => {
if (tooltipItems.datasetIndex == 0) {
return data.datasets[0].label + ': ' + data.datasets[0].data[tooltipItems.index];
}
return null;
}
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>

Apexcharts change color of bars in bar chart and when clicked

I have difficulty in changing the color of the bars in the bar chart to suit the theme of my website. I have gone to youtube and watched the following video https://www.youtube.com/watch?v=Cw87VN7K1Ek
and tried their solution to change color but was not successful. I would like to seek your help to know where I may have gone wrong or changes that have to be made to my code to successfully display the new color.
The following is the code snippet to configure the bar chart:
constructor() {
this.chartOptions = {
series: [
{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: "bar"
},
title: {
text: "My First Angular Chart"
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
},
fill: {
colors: ['#f00']
}
};
}
The following is the result, the colors of the chart is still the default color from ApexCharts
I also would like to change the color of a specific bar (data point) within the bar chart when selected. I have looked through the following link: https://apexcharts.com/docs/options/states/, but this only changes the shade but I like to change the color but have not seem to find any resource to go about do it. I would sincerely appreciate if you have experienced the following before and has managed to change it successfully.

You can try this configuration:
var options = {
chart: {
type: 'bar',
height: 'auto'
},
series: [{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
dataLabels: {
enabled: false
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
},
colors: [
function ({ value, seriesIndex, dataPointIndex, w }) {
if (dataPointIndex == 8) {
return "#7E36AF";
} else {
return "#D9534F";
}
}
]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I hope it was helpful!

Below is the pen for different color options. It shows single color and changes to multi color after a delay just to showcase available options. Pick the one you like.
https://codepen.io/raevilman/full/dyXNgNo
Chart options used in above link.
var options = {
chart: {
type: "bar"
},
series: [
{
data: [10, 40, 20, 44, 22, 12]
}
],
xaxis: {
categories: [1, 2, 3, 4, 5, 6]
},
colors: ["#00FF00"]
};
PS: I couldn't get the way to change selection color for bar chart.

flot how to know the x axis points in dynamic data

I am using flot jquery library to draw charts.
when my chart has a specific number of columns, I can set the x values for my points.
but now I have a dynmic data. so how can I know the points of the x axis please?
for example,
the x axis of the first point is 1325876000000
the x axis of the second point is 1328194400000
the third is 1330360000000
the fourth is 1332838400000
but lets say that I will have 9 columns. how can I know the x axis for them please?
I am printing the chart in this way
var holder = $('#vertical-chart');
if (holder.length) {
$.plot(holder, data, chartOptions);
}
the input data is like this
label: "label1"
data: [[1325876000000,0],[1325876000000,0],[1325876000000,0],[1325876000000,30]]
but now I don't know how many points in that array. it could be 11 or it could be 2
edit
this the chartoption
chartOptions = {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
tickSize: [2, "month"],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 1,
order: true,
lineWidth: 0,
fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
},
colors: App.chartColors
}

When using $.plot(holder, data, chartOptions);, save the plot with a variable.
Declare var plot; globally,
and then call like this: plot = $.plot(holder, data, chartOptions);.
You can grab the data from the plot like this:
var datasets = [];
var xData = [];
datasets = plot.getData(); //this returns an array of all datasets
//goes through each series of data
for (var i = 0; i < datasets.length; i++){
//picks the series with label of "label 1"
if (datasets[i].label == "label 1"){
//copies x coordinates from the series into xData
for (var j = 0; j < datasets[i].data[j].length; j++){
xData.push(datasets[i].data[j][0]); //if you want y coords, use datasets[i].data[j][1]
}
}
}