I've set up a chart by the following way:
Code: Select all
chart: {
style: {
fontFamily: 'Noto Sans TC, sans-serif',
},
backgroundColor: '#000000',
height: renderTo.clientHeight,
spacingRight: 60,
renderTo: renderTo,
marginTop: 40,
animation: false,
},
title: {
text: '',
},
lang: {
noData: '',
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '30px',
color: '#8e8e8e',
},
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
rangeSelector: {
enabled: false,
},
navigator: {
enabled: false,
},
scrollbar: {
enabled: false,
},
plotOptions: {
series: {
turboThreshold: 5000,
marker: { enabled: false },
states: {
hover: {
enabled: false,
},
},
dataGrouping: {
enabled: false,
dateTimeLabelFormats: {
millisecond: [
'%m月%d日 %H:%M:%S.%L',
'%m月%d日 %H:%M:%S',
'-%H:%M',
],
second: ['%m月%d日 %H:%M:%S', '%m/%e/%y %H:%M', ''],
minute: ['%m月%d日 %H:%M', '%m月%d日 %H:%M', '-%H:%M'],
hour: ['%m月%d日 %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
day: ['%Y年%m月%d日', '%m/%e/%y %H:%M', '-%H:%M'],
week: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
month: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
year: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
},
},
},
},
xAxis: {
gridLineWidth: 1,
gridLineColor: 'rgba(230, 230, 230, 0.1)',
type: 'datetime',
ordinal: false,
minTickInterval: 1000 * 60,
labels: {
step: 1,
style: { color: '#ffffff', fontSize: '14px' },
},
dateTimeLabelFormats: {
second: { main: '%H:%M:%S' },
minute: { main: '%H:%M' },
hour: { main: '%H:%M' },
day: { main: '%H:%M' },
week: { main: '%H:%M' },
month: { main: '%H:%M' },
year: { main: '%H:%M' },
},
crosshair: false,
},
yAxis: [
{
id: PRICE_Y_AXIS_ID,
labels: {
align: 'right',
x: 50,
style: { color: '#ffffff', fontSize: '14px' },
format: '{value}',
},
title: {
text: '',
rotation: 0,
},
top: '5%',
height: '80%',
gridLineColor: '#333f54',
crosshair: false,
endOnTick: false,
showLastLabel: true,
},
{
labels: {
align: 'right',
x: 50,
style: { color: '#ffffff', fontSize: '14px' },
},
title: {
text: '',
rotation: 0,
},
top: '90%',
height: '10%',
},
],
series: [priceSeries, volumeSeries, prePriceSeries],
And I do update the min and max values of Axis when I get data by this way:
Code: Select all
chart.xAxis[0].update(
{
min: openTime, // 15:00
max: closeTime, // 13:45
},
true,
);
In most cases, this would work for me.
Like this: https://imgur.com/a/lqEyJLv
However, the blue line (priceSeries) is not aligned with the far left when there are merely a few ticks of data (stock market just opened a few minutes ago).
Before stock market open (PM 14:55): https://imgur.com/a/iEV6Dd2
Stock market just opened, and get the first tick (PM 15:00): https://imgur.com/a/I7C7ppt
Get the second tick (PM 15:01): https://imgur.com/a/KNfgLPz
How could I do to make the blue line align with the far left of chart?
If the information mentioned above is not clear enough, please let me know.
Thank you for your help.
Best regards,