We Keep Coding

how to change candlestick color of google-charts?

I want to change the color of the lines representing the low and high points of the candlestick. But when I try, both the falling and rising candles change to the same color. like this.
I want the falling and rising candles to have different colors. I searched the API documentation, but couldn't find an answer.
This is my hope
Here is my code
const options = {
legend: "none",
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#f6465d" }, // red
risingColor: { strokeWidth: 0, fill: "#0ccb80" }, // green
},
colors: ['#0ccb80'],
};
const data = [
["Day", "", "", "", ""],
["Mon", 20, 28, 38, 45],
["Tue", 31, 38, 55, 66],
["Wed", 50, 55, 77, 80],
["Thu", 77, 77, 66, 50],
["Fri", 68, 66, 22, 15],
["Sat", 42, 54, 60, 100],
["Sun", 34, 56, 64, 80],
];

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>

JS; maximum path sum exercice in simple arrays; invalid result

I am doing the euler "maximum path sum" exercice.
By starting at the top of the triangle below and moving to adjacent numbers on the row below,
the maximum total from top to bottom is 23.
3
7 4
2 4 6
8 5 9 3
That is, 3 + 7 + 4 + 9 = 23.
Find the maximum total from top to bottom of the triangle.
I created a simple method which calculates for each position in the row, the maximum possible value.
If we take the previous example, it becomes:
3
10 7
12 14 13
22 19 23 16
The maximum value in the last row is 23.
Here is is the code:
function maximumPathSumI(triangle) {
let columnSum = [];
for (let row=0; row<triangle.length; row++) {
let newColumnSum = [];
for (let column=0; column<triangle[row].length; column++) {
let maxPreviousValue = getMaxPreviousValueForPosition(column, columnSum);
newColumnSum[column] = maxPreviousValue + triangle[row][column];
}
columnSum = newColumnSum;
}
return Math.max(...columnSum);
}
function getMaxPreviousValueForPosition(position, previousValues) {
let maxValue = previousValues[position] || 0;
if (position > 0 && maxValue < previousValues[position-1]) maxValue = previousValues[position-1];
if (position < previousValues.length && maxValue < previousValues[position+1]) maxValue = previousValues[position+1];
return maxValue;
}
It works with the first test, but doesn't seem to give the right result with this triangel
const testTriangle = [
[75,],
[95, 64,],
[17, 47, 82,],
[18, 35, 87, 10,],
[20, 04, 82, 47, 65],
[19, 01, 23, 75, 03, 34,],
[88, 02, 77, 73, 07, 63, 67,],
[99, 65, 04, 28, 06, 16, 70, 92,],
[41, 41, 26, 56, 83, 40, 80, 70, 33,],
[41, 48, 72, 33, 47, 32, 37, 16, 94, 29,],
[53, 71, 44, 65, 25, 43, 91, 52, 97, 51, 14,],
[70, 11, 33, 28, 77, 73, 17, 78, 39, 68, 17, 57,],
[91, 71, 52, 38, 17, 14, 91, 43, 58, 50, 27, 29, 48,],
[63, 66, 04, 68, 89, 53, 67, 30, 73, 16, 69, 87, 40, 31,],
[04, 62, 98, 27, 23, 09, 70, 98, 73, 93, 38, 53, 60, 04, 23,],
];
It returns 1116 instead of 1074.
When I go through the results row by row, everything seems fine to me.
Here is the intermediary calculations:
[ 75 ]
//[95, 64,],
[ 170, 139 ]
//[17, 47, 82,],
[ 187, 217, 221 ]
//[18, 35, 87, 10,],
[ 235, 256, 308, 231 ]
//[20, 04, 82, 47, 65],
[ 276, 312, 390, 355, 296 ]
//[19, 01, 23, 75, 03, 34,],
[ 331, 391, 413, 465, 358, 330 ]
//[88, 02, 77, 73, 07, 63, 67,],
[ 479, 415, 542, 538, 472, 421, 397 ]
//[99, 65, 04, 28, 06, 16, 70, 92,],
[ 578, 607, 546, 570, 544, 488, 491, 489 ]
//[41, 41, 26, 56, 83, 40, 80, 70, 33,],
[ 648, 648, 633, 626, 653, 584, 571, 561, 522 ]
//[41, 48, 72, 33, 47, 32, 37, 16, 94, 29,],
[ 689, 696, 720, 686, 700, 685, 621, 587, 655, 551 ]
//[53, 71, 44, 65, 25, 43, 91, 52, 97, 51, 14,],
[ 749, 791, 764, 785, 725, 743, 776, 707, 752, 706, 565 ]
//[70, 11, 33, 28, 77, 73, 17, 78, 39, 68, 17, 57,],
[ 861, 802, 824, 813, 862, 849, 793, 854, 791, 820, 723, 622 ]
//[91, 71, 52, 38, 17, 14, 91, 43, 58, 50, 27, 29, 48,],
[ 952, 932, 876, 900, 879, 876, 945, 897, 912, 870, 847, 752, 670 ]
//[63, 66, 04, 68, 89, 53, 67, 30, 73, 16, 69, 87, 40, 31,],
[ 1015, 1018, 936, 968, 989, 998, 1012, 975, 985, 928, 939, 934, 792, 701 ]
//[04, 62, 98, 27, 23, 09, 70, 98, 73, 93, 38, 53, 60, 04, 23,],
[ 1022, 1080, 1116, 1016, 1021, 1021, 1082, 1110, 1058, 1078, 977, 992, 994, 796, 724 ]

You've misunderstood the challenge. The error in your code is in this line:
maxValue = previousValues[position+1]
Your code allows to look at three different sums from the previous row, but it should only look at two (at the most): the one at position-1 (if valid) and the one at position, but not the one at position+1.

Base on your intermediate calculation, It seem to be correct to find maximum of the last row 1116.
https://codepen.io/tmixab/pen/oNWwYLd

What's faster in JS: Object with keys or array with an if statement?

Which of these structures is generally more performant in JS with the v8 engine?
Example 1:
const obj = {
a: 'hello',
b: 'world',
c: 'etc',
};
function getVal(str) {
return obj[str];
}
getVal('b');
Example 2:
function getVal(str) {
if(str=='a') return 'hello';
if(str=='b') return 'world';
return 'etc';
}
getVal('b');
I would imagine example 2 is faster, but 1 is better code. I ask because I'm looking at chess AI, and can structure the position weights as objects:
const positions_w = {
'p':[
[ 100, 100, 100, 100, 105, 100, 100, 100],
[ 78, 83, 86, 73, 102, 82, 85, 90],
[ 7, 29, 21, 44, 40, 31, 44, 7],
[ -17, 16, -2, 15, 14, 0, 15, -13],
[ -26, 3, 10, 9, 6, 1, 0, -23],
[ -22, 9, 5, -11, -10, -2, 3, -19],
[ -31, 8, -7, -37, -36, -14, 3, -31],
[ 0, 0, 0, 0, 0, 0, 0, 0]
],
'n': // ...
and then get them with positions_w[piece.type][y][x] or structure them in arrays:
const p = [
[ 100, 100, 100, 100, 105, 100, 100, 100],
[ 78, 83, 86, 73, 102, 82, 85, 90],
[ 7, 29, 21, 44, 40, 31, 44, 7],
[ -17, 16, -2, 15, 14, 0, 15, -13],
[ -26, 3, 10, 9, 6, 1, 0, -23],
[ -22, 9, 5, -11, -10, -2, 3, -19],
[ -31, 8, -7, -37, -36, -14, 3, -31],
[ 0, 0, 0, 0, 0, 0, 0, 0]
];
and then get them with if(piece.type=='p')return p[y][x]

If the object is small and was created with all of its keys, the speed of property access should be comparable to a switch statement.
One thing to consider however is that you will be updating your position weights pretty often. For this reason I think one big "3D" Int16Array would make a greater difference overall.
In any case, I would make sure no part of my app is dependant on the concrete data structure so that it is possible to delay this decision until later when you can actually profile your AI speed.

Issues with series.data in highcharts

I'm using a column chart with a slider that redraws the chart after slide operation is invoked. I'm storing each data array in a javascript object and the chart renders according to the slider option. After assigning the initial values for the first slider option, the chart renders correctly but when I slide back to the first position, the chart won't render. And the weird part is when I assign the initial values to a separate variable and the data option is assigned with this variable, the chart renders correctly at every position.
Here's the code:
var data = {
"jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
"feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
"mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
"apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
"may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
"jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
"jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
"aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
"sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
"oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
"nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
"dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
};
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];
var chart = new Highcharts.chart({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 50,
marginLeft: 100,
marginBottom: 50
},
title: false,
exporting: {enabled: false},
xAxis: {
crosshair: true,
tickColor: '#7F7F7F',
lineColor: '#7F7F7F',
tickWidth: 0,
labels: {
step: 5
},
title: {
text: 'x-axis',
align: "left",
x: -10,
rotation: 0,
style: {
"font-size" : "15px"
}
}
},
yAxis: {
min: 0,
title: {
text: 'y-axis',
align: 'high',
rotation: 0,
y: -10,
offset: 0,
style: {
"font-size" : "15px"
}
},
gridLineColor: 'transparent',
lineColor: '#7F7F7F',
lineWidth: 1,
tickWidth: 1,
tickColor: '#7F7F7F',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
step: 2,
formatter: function(){
if(this.value > 999)
return Math.round(this.value/1000) + 'k';
return this.value;
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: someData
}],
credits: false
});
$('#slider_bar').on("slide", function () {
chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});
The initial position of the slider is at jan and the chart renders correctly when I slide back to jan. I'd like to know why the chart won't render when I assign series.data as:
data: data.jan
Any suggestions?

Highchart series.data expects a key value pair, or an array of arrays like
[[x1,y1],[x2,y2]]
or
{
y: [x1,x2]
}
now when you do data = data.jan Highchart is not able to find the Y value because data.jan is a simple array

Found the solution:
instead of writing
data: data.jan
write
data: data.jan.slice()
The slice function does not directly returns the reference of the array, instead it returns a copy of the array. I still wonder why we need to use the slice function in the first place, for this particular situation but it works.