Lemon
Posts: 12
Joined: Wed May 12, 2021 8:13 am

The first point of line is not align with the far left of chart

Hello,

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,
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: The first point of line is not align with the far left of chart

Hi,

Thanks for contacting us!

Could you please reproduce the issue in an online editor that I could work on? It will be much easier to understand what do you want to achieve.
You can start here: https://jsfiddle.net/gh/get/library/pur ... basic-line

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Stock”