We Keep Coding

Trying to change background color in chart js filter

I am new to development and trying to do a project where I creating a webpage which have price range filter and there is a chart linked to that price range filter. What I am trying to do is change the background color of my labels of chartJs according to ranger filter. I want only labels in given range to show orange color and other labels should show light pink color, but here when I change background color after giving a condition all the labels' color get changed but i want only labels falling under filter range change the color.
trying to achieve range filter in this
let canvasElement = document.getElementById("productChart");
const dataPoints = [21, 0, 19, 3, 5, 0, 2, 3, 10, 4, 6, 7, 2, 0, 0, 0, 24, 30, 32, 45, 44, 22,
21, 10, 7, 5, 4, 3, 1, 0, 0];
const labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 31]
const backgroundColor = 'rgba(255, 99, 71, 0.3)';
const newBackgroundColor = 'rgba(255, 99, 71, 1)';
let config =
{
type: 'bar',
data: {
labels: labels,
datasets: [{
barPercentage: 0.5,
barThickness: 5,
maxBarThickness: 12,
minBarLength: 2,
// label: 'Number of Phones',
data: dataPoints, //price
backgroundColor: backgroundColor,
borderColor: [
'rgba(255, 99, 71, 0.2)',
],
borderWidth: 1,
borderRadius: 5,
// borderSkipped: false,
}]
},
options: {
responsive: true,
scales: {
x: {
ticks: {
display: false, //this will remove only the label
},
grid: {
display:false,
borderColor: 'black', // <-- this line is answer to initial question
borderWidth:2,
}
},
y: {
display: false, //this will remove only the label
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
displayColors: false,
padding: 10,
yAlign: 'top',
},
},
}
}
let productChart = new Chart(canvasElement, config)
const start = document.getElementById('start')
const end = document.getElementById('end')
function updateMin(range) {
const minValue = labels.slice(range.value - 1, end.value);
let newLabels = productChart.config.data.labels
for(let i = 0; i < newLabels.length; i++){
value = newLabels[i];
if (minValue.includes(value)){
productChart.config.data.datasets[0].backgroundColor=newBackgroundColor;
}
}
end.min = range.value
productChart.update();
}

You could use a scriptable options for backgroundColor options. Based on the argument, context.index (see here the doc: https://www.chartjs.org/docs/latest/general/options.html#scriptable-options) you can decide at runtime which color to use.
In the below snippet, changing the stepper values, the chart will change the background colors.
I have used part of your code. Instead of using the stepper, you can use your slider or what you are using.
const dataPoints = [21, 0, 19, 3, 5, 0, 2, 3, 10, 4, 6, 7, 2, 0, 0, 0, 24, 30, 32, 45, 44, 22,
21, 10, 7, 5, 4, 3, 1, 0, 0];
const labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 31]
const backgroundColor = 'rgba(255, 99, 71, 0.3)';
const newBackgroundColor = 'rgba(255, 99, 71, 1)';
const from = document.getElementById("from");
const to = document.getElementById("to");
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
//barPercentage: 0.5,
//barThickness: 5,
//maxBarThickness: 12,
//minBarLength: 2,
data: dataPoints,
backgroundColor(ctx) {
const fromValue = parseFloat(from.value);
const toValue = parseFloat(to.value);
const value = ctx.index + 1;
if (value >= fromValue && value <= toValue) {
return newBackgroundColor;
}
return backgroundColor;
},
borderColor: 'rgba(255, 99, 71, 0.2)',
borderWidth: 1,
borderRadius: 5,
}]
},
options: {
responsive: true,
scales: {
x: {
ticks: {
display: false,
},
grid: {
display:false,
}
},
y: {
display: false,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
}
});
from.addEventListener('click', function() {
myChart.update();
});
to.addEventListener('click', function() {
myChart.update();
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
From:
<input type="number" id="from" min="1" max="31" value="1"/>
To:
<input type="number" id="to" min="1" max="31" value="31"/>
</body>
</html>

Move y-Axis and hide in Chart.JS V3

So I've created this chart, and I'm trying to move the axis around so the Dark red is on the left, and the Blue and the sub of the bar charts is displayed, but I'm having trouble moving the dark red to the right side of this graf. I did try to use the position: 'right', but nothing changed.
I'm trying to make it look like this:
But I can only get this:
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
So how do I move the Dark Red y-axis over to the right side?

I could use the DarkR id and position it right in scales like this
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
},
DarkR: {
position: 'right', // `axis` is determined by the position as `'y'`
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>

Modify point style when it has drawn tick in ChartJs

I am migrating from Highcharts to ChartJs (v2.8), and in Highcharts, I can get the drawn ticks, and then modify the point style relational with this tick, as shown below:
but in ChartJs I don't see any way of doing that, I don't be able to get the drawn ticks and I don't see the way of modifying the style of only some points either. It's not possible?
Actual config:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
datasets: [
{
data: [611, 605, 594, 581, 573, 578, 585, 587, 588, 595, 601, 605, 608, 610, 612, 611, 612, 613, 616, 618, 621, 623, 625, 627, 628, 631, 636, 638, 643, 650],
fill: false,
borderWidth: 1,
pointRadius: 3,
pointBorderWidth: 1,
pointBackgroundColor: "#adadad",
pointHoverRadius: 6,
pointHoverBorderColor: "#adadad",
pointHoverBackgroundColor: `${"#adadad"}30`,
pointHoverBorderWidth: 1,
},
]
},
options: {
responsive: true,
tooltips: {
mode: 'interpolate',
intersect: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
distribution: 'series',
time: {
displayFormats: {
month: '%e. %b',
},
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 10,
},
}],
yAxes: [{
gridLines: {
drawBorder: false,
},
ticks: {
padding: 15,
},
}],
},
colors: [{
borderColor: "#adadad",
}],
showLegend: false,
}
}
Example

How to normalize a histogram with Danfo.js?

I need to get normalized histogram.
So in Danfo notebooks I tried syntax like this:
s = new dfd.Series([1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 75])
s.plot(this_div()).hist({histnorm: 'probability', layout: {title: 'Normalized Histogram'}})
But it looks like danfo.js ignores Plotly histnorm trace attribute.
So the question is: Is it possible to use Plotly trace attributes with danfojs's plots, and if it's possible then what is correct syntax for that?

Highchart - Area chart: customize tooltip

I am trying to customize the tooltip of area chart. I am using Highchart for this.
I am plotting 3 series in area chart. My requirement is to show tooltip at fixed location in chart which is top center. Now, when i put cursor at any point then tooltip should show all series name and their current value where the cursor is. Refer below image:
Currently i am able to show tooltip on top - center and putting mouse at any point is showing current series name and data but it is showing current series name in all 3 places.
Highchart option:
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'ACCUMULATED WEALTH'
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
tickmarkPlacement: 'on',
crosshair: {
width: 1,
color: "#ccc"
},
title: {
enabled: false
}
},
yAxis: {
title: {
text: false
},
opposite: true,
labels: {
formatter: function() {
return '$' + this.value + 'k';
}
},
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
shared: true,
padding: 0,
split: false,
headerFormat: "",
pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
'<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
footerFormat: "",
positioner: function () {
return { x: 250, y: 25 };
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Cash Flow',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
}, {
name: 'Appreciation',
data: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
}, {
name: 'Principal',
data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33]
}]
});
Here is what i have tries so far:
https://jsfiddle.net/2pdossk7/13/
Please help. Thanks in advance!

It might be difficult to achieve the desired result without tooltip.formatter.
This is how you can build tooltip text in a formatter:
formatter: function(tooltip) {
const points = this.points;
let str = '<table><tr>';
points.forEach(point => {
str += '<td style="text-align:center">' + point.y + '</td>';
});
str += '</tr><tr>';
points.forEach(point => {
str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
});
str += '</tr></table>';
return str;
},
And position it in the center of the chart:
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
}
Example and output
https://jsfiddle.net/eb3ou25v/

You can achieve desired result using pointFormat method
This is how you can use this
pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
'<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
}
for jsfiddle example click here