Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list .

Have a nice day! 🍵

Modified code from examples to reproduce the issue:

function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}

option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
grid: [{
left: 50,
right: 50,
height: '35%'
}, {
left: 50,
right: 50,
top: '55%',
height: '35%'
}],
xAxis: [{
type: 'time',
splitLine: {
show: false
}
},{
type: 'time',
splitLine: {
show: false
},
gridIndex: 1
}],
yAxis: [{
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},{
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
gridIndex: 1
}],
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data,
xAxisIndex: 1,
yAxisIndex: 1
}]
};

setInterval(function () {

for (var i = 0; i < 5; i++) {
    data.shift();
    data.push(randomData());
}

myChart.setOption({
    series: [{
        data: data
    },{
        data: data
    }]
});

}, 1000);

Could you try with 5.0.1?

Could you try with 5.0.1?

It does not work in latest version, I'm trying to achieve the same thing without success. I have 4 grids. Each grid contains one yAxis and 3 xAxis attached to each yAxis. Here is the example

Here is the code that can be use in the online editor:
Show Code

interface DataItem {
  value: number;
  date: string;
}
// Generate Data
let now = new Date(1997, 9, 3);
let now2 = new Date(1997, 9, 3);
let now3 = new Date(1997, 9, 3);
let value = 250;
let value2 = 750;
let value3 = 1500;
let oneDay = 24 * 3600 * 1000;

function randomData(): DataItem {
  now = new Date(+now + oneDay);
  value = value + Math.random() * 21 - 10;
  return {
    date: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    value: Math.round(value)
  };
}
function randomData2(): DataItem {
  now2 = new Date(+now2 + oneDay);
  value2 = value2 + Math.random() * 21 - 10;
  return {
    date: [now2.getFullYear(), now2.getMonth() + 1, now2.getDate()].join('/'),
    value: Math.round(value2)
  };
}
function randomData3(): DataItem {
  now3 = new Date(+now3 + oneDay);
  value3 = value3 + Math.random() * 21 - 10;
  return {
    date: [now3.getFullYear(), now3.getMonth() + 1, now3.getDate()].join('/'),
    value: Math.round(value3)
  };
}
const data: DataItem[] = [];
const data2: DataItem[] = [];
const data3: DataItem[] = [];

for (var i = 0; i < 1000; i++) {
  data.push(randomData());
  data2.push(randomData2());
  data3.push(randomData3());
}

const colors = [
  '#5470C6',
  '#FAC858',
  '#91CC75',
  '#EF6F6F',
  '#3BA272',
  '#84C8E2',
  '#FC8452',
  '#EA7CCC',
  '#9A60B4',
  '#639446',
  '#572C53',
  '#0D1066'
];

// Generate xAxis
const getXAxisDataGridIndex = (xAxisIndex: number) => {
  if (xAxisIndex < 3) return 0;
  if (xAxisIndex < 6) return 1;
  if (xAxisIndex < 9) return 2;
  if (xAxisIndex < 12) return 3;
  throw 'Too Many xAxis';
};

const getXAxisLabelMargin = (xAxisIndex: number) => {
  return (xAxisIndex % 3) * 15 + 5;
};

const xAxis = [
  ...[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((xAxisIndex) => ({
    type: 'value',
    boundaryGap: [0, '100%'],
    gridIndex: getXAxisDataGridIndex(xAxisIndex),
    position: 'top',
    axisLabel: {
      show: true,
      color: colors[xAxisIndex],
      showMaxLabel: false,
      margin: getXAxisLabelMargin(xAxisIndex)
    },
    axisTick: { show: true },
    axisLine: { show: true, onZero: false },
    alignTicks: true
  })),
  { type: 'value', gridIndex: 4 }
];

// Generate yAxis
const yAxis = [
  {
    type: 'time',
    gridIndex: 0,
    min: new Date(1997, 9, 3),
    max: now,
    position: 'left',
    axisLabel: { width: 100, align: 'right' },
    inverse: true
  },
  ...[1, 2, 3, 4].map((yAxisIndex) => ({
    type: 'time',
    gridIndex: yAxisIndex,
    min: new Date(1997, 9, 3),
    max: now,
    position: 'left',
    axisLabel: { show: false },
    axisTick: { show: true },
    inverse: true
  }))
];

// Generate series
const getSeriesDatasetId = (seriesIndex: number) => {
  return ((seriesIndex % 3) + 1).toString();
};

const getSeriesYAxisIndex = (seriesIndex: number) => {
  if (seriesIndex < 3) return 0;
  if (seriesIndex < 6) return 1;
  if (seriesIndex < 9) return 2;
  if (seriesIndex < 12) return 3;
  throw 'Too Many series';
};

const series = [
  ...[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((seriesIndex) => ({
    type: 'line',
    name: `Series ${seriesIndex + 1}`,
    showSymbol: false,
    datasetId: getSeriesDatasetId(seriesIndex),
    dimensions: ['value', 'date'],
    yAxisIndex: getSeriesYAxisIndex(seriesIndex),
    xAxisIndex: seriesIndex
  })),
  {
    type: 'line',
    name: 'markLines',
    markLine: {
      data: [{ yAxis: new Date(1999, 9, 3).toISOString() }],
      label: { position: 'insideEndTop' }
    },
    yAxisIndex: 4,
    xAxisIndex: 12,
    tooltip: { show: false }
  }
];

option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  grid: [
    { left: '8%', top: 50, bottom: 10, width: '23%' },
    { left: '31%', top: 50, bottom: 10, width: '23%' },
    { left: '54%', top: 50, bottom: 10, width: '23%' },
    { left: '77%', top: 50, bottom: 10, width: '23%' },
    { left: '8%', top: 50, bottom: 10, width: '92%' }
  ],
  dataset: [
    {
      id: '1',
      source: data
    },
    {
      id: '2',
      source: data2
    },
    {
      id: '3',
      source: data3
    }
  ],
  xAxis,
  yAxis,
  series
};

When hovering over the grid I get the tooltip for only the series in the section on the grid the mouse is over:

And we are trying to achive something like this:

hey, any update about this thread ? @thefat32 I'm too interested to this feature, I have not understood the whole setup but what is the parameter to have the dashed grey cutline along graphs in horizontal ? thanks

I found @thefat32 it need just to add in echarts config:

axisPointer: {
      link: [
        {
          xAxisIndex: 'all',
        },
      ],
    },

I hope it helps