[Feature] echarts area chart axis how to implements fixed position, when mouse moving and the data is updating

[minicloudsky]

What problem does this feature solve?

I want to create a chart like below with echarts area chart,however,I can't fix the tooltip in a specific pisition,how can i fix the echarts tooltip, and when x axis the moving,the data the updating,the results like below My echarts area chart

I expected result implement in echarts (data update when user mouse moving)

How can i config echarts options,or what should i do ?thanks community

What does the proposed API look like?

My current echarts code like below

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    position: 'left',
    confine: false
    // position: function (pt) {
    //   return [pt[0], '5%'];
    // }
  },
  title: {
    left: 'center',
    text: 'mysql average cpu usage'
  },
  // toolbox: {
  //   feature: {
  //     dataZoom: {
  //       yAxisIndex: 'none'
  //     }
  //     // restore: {},
  //     // saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '14:56',
      '14:57',
      '14:58',
      '14:59',
      '15:00',
      '15:01',
      '15:03',
      '15:04',
      '15:05',
      '15:06',
      '15:07',
      '15:08',
      '15:09',
      '15:10',
      '15:11',
      '15:12',
      '15:13',
      '15:14',
      '15:15',
      '15:16',
      '15:17',
      '15:18',
      '15:19',
      '15:20',
      '15:21',
      '15:22',
      '15:23',
      '15:24',
      '15:25',
      '15:26',
      '15:27',
      '15:28',
      '15:29',
      '15:30',
      '15:31',
      '15:32',
      '15:33',
      '15:34',
      '15:35',
      '15:36',
      '15:37',
      '15:38',
      '15:39',
      '15:40',
      '15:41',
      '15:42',
      '15:43',
      '15:44',
      '15:45',
      '15:46',
      '15:47',
      '15:48',
      '15:49',
      '15:50',
      '15:51',
      '15:52'
    ],
    show: false 
  },
  yAxis: {
    type: 'value',
    show: false, 
    boundaryGap: [0, '100%']
  },
  dataZoom: [],
  series: [
    {
      name: '',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: '#a4def7'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#a4def7'
          },
          {
            offset: 1,
            color: '#a4def7'
          }
        ])
      },
      data: [
        1.73, 1.62, 1.69, 1.73, 1.72, 2.31, 1.98, 2.01, 1.84, 1.9, 1.81, 1.87,
        1.98, 1.87, 2.07, 1.91, 1.91, 1.77, 1.72, 1.76, 1.77, 1.72, 1.69, 1.73,
        1.93, 1.74, 1.8, 1.85, 1.71, 1.71, 1.63, 1.55, 1.59, 1.64, 1.9, 1.67,
        1.56, 1.56, 1.55, 1.61, 1.57, 1.56, 1.52, 1.55, 1.83, 1.53, 1.58, 1.6,
        1.54, 1.6, 1.52, 1.52, 1.53, 1.49, 1.68, 1.54
      ]
    }
  ]
};

option && myChart.setOption(option);

[pissang]

See https://echarts.apache.org/en/option.html#tooltip.position

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!