Search code examples
reactjsecharts

Apache EChart how do I set 30 second interval on my xAxis

I am currently working on a project working on a live time chart with apache E-Chart.

As you can see from this screenshot enter image description here

Each of the time interval is currently 1 minute (which is the default value provided for the set of data I have I think).

However, I want the time interval to be in 30 seconds (and 15, 5 seconds in the future) interval instead.

Below is my code:

  const option = {
    title: {
      text: 'Dynamic Data & Time Axis'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'time',
      position: 'bottom',
      min: minTime,
      max: currentTime,

      splitLine: {
        show: true,
        interval: 1,
      },
      axisLabel: {
        formatter: function (value: any) {
          const date = new Date(value);
          const hours = date.getHours().toString().padStart(2, '0');
          const minutes = date.getMinutes().toString().padStart(2, '0');
          const seconds = date.getSeconds().toString().padStart(2, '0');
          return `${hours}:${minutes}:${seconds}`;
        },
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '20%'],
      interval: 100,
      splitLine: {
        show: true,
      },
    },
    series: [
      {
        name: 'Data Name Placeholder',
        type: 'line',
        showSymbol: false,
        data: valueTime,
        itemStyle: {
          color: '#FF0000'
        },
      }
    ]
  };
Solution

  • You can use the minInterval and maxInterval properties. Note, that the maxInterval needs to be strictly larger than the desired interval.

    Example:

    xAxis: {
    minInterval: 1000 * 30,
    maxInterval: 1000 * 30.1
}