Closed iamaliybi closed 1 year ago
LeeLenaleee
commented
1 year ago As stated in the issue template:
Chart.js versions lower then 4.x are NOT supported anymore, new issues will be disregarded.
Also a reproducible sample is required. So please add a v4 reproducible sample
iamaliybi
commented
1 year ago "chartjs-chart-financial" doesn't work with v4.3.0
Uncaught TypeError: Class extends value undefined is not a constructor or null
LeeLenaleee
commented
1 year ago For now we can't do anything about it. If you can reproduce it without the financial package we can take a look at it. Otherwise you will need to ask if the maintainers of the financial package can update it to be compatible with chart.js v4
iamaliybi
commented
1 year ago The bug was Fixed, I just download the main source from Github and put into the project files
But I have the same issue with Chart.js@4.3.0
I'm getting data from Websocket so I can't give you a sample!
Chart options:
{
type: "line",
data: {
labels: [],
datasets: [
{
label: "خرید",
data: [],
borderColor: "rgb(21, 183, 97)",
backgroundColor: "rgb(21, 183, 97, 0.1)",
fill: true,
indexAxis: 'x',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 2,
pointHoverBorderWidth: 2,
parsing: {
xAxisKey: 'price',
yAxisKey: 'volume'
},
},
{
label: "فروش",
data: [],
indexAxis: 'x',
borderColor: "rgb(224, 64, 64)",
backgroundColor: "rgba(224, 64, 64, 0.1)",
fill: true,
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 2,
pointHoverBorderWidth: 2,
parsing: {
xAxisKey: 'price',
yAxisKey: 'volume'
},
}
],
},
plugins: [
{
id: 'chartAreaBorder',
afterDraw: (chart, _, options: PluginOptions) => {
const { chartArea: { top, width }, scales: { y: yScale }, ctx } = chart;
ctx.save();
const centeredPixel = (width + (yScale.width * 2)) / 2;
ctx.beginPath();
ctx.strokeStyle = 'rgb(136, 136, 136)';
ctx.lineWidth = 1;
ctx.setLineDash([12, 8]);
ctx.moveTo(centeredPixel, top + 27);
ctx.lineTo(centeredPixel, yScale.height + yScale.top);
ctx.stroke();
const txt = sepNumbers(options?.yesterdayClosingPrice ?? 0);
const txtWidth = txt.length * 3;
ctx.font = 'normal 14px IRANSansEnNum';
ctx.fillStyle = "rgb(136, 136, 136)";
ctx.fillText(txt, centeredPixel + txtWidth, 23);
ctx.restore();
}
}
],
options: {
indexAxis: 'y',
animation: {
duration: 1000,
easing: 'easeInElastic'
},
plugins: {
legend: {
display: false,
labels: {
font: {
size: 10,
},
},
},
chartAreaBorder: { yesterdayClosingPrice },
tooltip: {
enabled: false,
position: 'nearest',
external: (context) => externalTooltipHandler(context, (value) => sepNumbers(value))
}
},
hover: {
intersect: false,
},
scales: {
x: {
offset: false,
bounds: 'data',
reverse: true,
ticks: {
source: 'data',
color: 'rgb(51, 51, 51)',
autoSkip: true,
maxRotation: 0,
maxTicksLimit: 6,
callback: (value) => `\u200E${sepNumbers(value ?? 0)}`
},
border: {
color: 'rgb(193, 193, 193)'
},
grid: {
tickColor: 'rgb(51, 51, 51)',
drawOnChartArea: false
},
},
y: {
offset: false,
display: true,
type: 'linear',
position: 'left',
ticks: {
color: 'rgb(51, 51, 51)',
autoSkip: false,
maxRotation: 0,
maxTicksLimit: 10,
callback: (value) => `\u200E${numFormatter(Number(value) || 0)}`
},
border: {
color: 'rgb(193, 193, 193)'
},
grid: {
tickColor: 'rgb(51, 51, 51)',
drawOnChartArea: false
},
}
},
},
}Chart data:
[
{
"price": 5550,
"volume": 1000
},
{
"price": 5560,
"volume": 18900
},
{
"price": 5580,
"volume": 28900
},
{
"price": 5560,
"volume": 327420
},
{
"price": 5550,
"volume": 1712947
},
{
"price": 5540,
"volume": 1929639
},
{
"price": 5520,
"volume": 1938665
},
{
"price": 5530,
"volume": 2308348
},
{
"price": 5500,
"volume": 2321748
},
{
"price": 5520,
"volume": 2575200
},
{
"price": 5500,
"volume": 2576200
},
{
"price": 5510,
"volume": 3204046
},
{
"price": 5500,
"volume": 5978026
},
{
"price": 5490,
"volume": 6030377
},
{
"price": 5480,
"volume": 6523120
},
{
"price": 5470,
"volume": 7370321
},
{
"price": 5460,
"volume": 7598060
},
{
"price": 5450,
"volume": 8173946
},
{
"price": 5440,
"volume": 8201051
},
{
"price": 5430,
"volume": 8277413
},
{
"price": 5420,
"volume": 8485029
},
{
"price": 5410,
"volume": 8803122
},
{
"price": 5400,
"volume": 9560300
},
{
"price": 5390,
"volume": 9563230
},
{
"price": 5380,
"volume": 9576630
},
{
"price": 5370,
"volume": 9639544
},
{
"price": 5360,
"volume": 9652485
},
{
"price": 5350,
"volume": 10390944
},
{
"price": 5340,
"volume": 10447818
},
{
"price": 5330,
"volume": 10486258
},
{
"price": 5320,
"volume": 10693258
},
{
"price": 5310,
"volume": 10771528
},
{
"price": 5300,
"volume": 11219179
},
{
"price": 5290,
"volume": 11295062
},
{
"price": 5280,
"volume": 15040445
},
{
"price": 5270,
"volume": 15066240
},
{
"price": 5260,
"volume": 15234711
},
{
"price": 5250,
"volume": 15337469
},
{
"price": 5240,
"volume": 15547975
},
{
"price": 5230,
"volume": 15563802
},
{
"price": 5220,
"volume": 15577914
},
{
"price": 5210,
"volume": 15827567
},
{
"price": 5200,
"volume": 16589122
},
{
"price": 5190,
"volume": 18288753
},
{
"price": 5180,
"volume": 19760753
},
{
"price": 5170,
"volume": 20965093
},
{
"price": 5160,
"volume": 22253979
},
{
"price": 5150,
"volume": 23288407
},
{
"price": 5140,
"volume": 24597422
},
{
"price": 5130,
"volume": 25819761
},
{
"price": 5120,
"volume": 26876743
},
{
"price": 5110,
"volume": 28049743
},
{
"price": 5100,
"volume": 29436880
},
{
"price": 5090,
"volume": 32401400
}
]
Expected behavior
Current behavior
Wrong background color in buy & sell position.
I wanna create something like Kucoin table and show symbol volume but I have a problem with the background when I update data.
Both solutions didn't work.
chart.js version
v3.9.1
Browser name and version
Chrome, 114.0.5735.199