How to shrink data in single date comparing to others

Question

`

above e chart gets more date range to the single date value. I want to shrink it and have equal date ranges to each datapoint. how to do that?

  const makeChart = () => {
    const chart = echarts.init(chartRef.current);
    const options = {
      xAxis: {
        type: "category",
        data: timestamp,
        name: "TimeStamp",
        nameLocation: "middle",
        nameTextStyle: {
          align: "center",
          verticalAlign: "top",
          lineHeight: 40,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "a1",
          min: 0,
          max: 1,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "a2",
          axisLabel: {
            formatter: "{value}",
          },
        },
      ],
      calculable: true,
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        left: 0,
      },
      tooltip: {
        trigger: "axis",
      },

      grid: {
        right: 30,
        left: 50,
      },
      series: [
        {
          name: "a1",
          type: "line",
          data: a1Values,
        },
        {
          name: "a2",
          type: "line",
          yAxisIndex: 1,
          data: a2Values,
        },
      ],
      dataZoom: [
        {
          show: true,
          xAxisIndex: 0,
          height: 15,
          start: 20,
          end: 100,
          height: 14,
          bottom: 8,
        },
        {
          type: "inside",
          start: 20,
          end: 100,
        },
        {
          show: true,
          yAxisIndex: 0,
          filterMode: "empty",
          width: 15,
          height: "80%",
          showDataShadow: false,
          right: "0%",
        },
      ],
    };

    chart.setOption(options);

    return () => {
      chart.dispose();
    };
  };

  useEffect(() => {
    makeChart();
  }, []);

above is the code that i used to generate the chart. what are the things that i have to use to change this to make the changes to show a chart like this, and when zooming the chart i want to show all the shrink datapoints too

Answer 1

You need to use xAxis type "time" instead of "category". If neccessary you can then costumize the interval with minInterval / maxInterval and bring the timestamps into a format of your choice with the axisLabel formatter function.

Example:

const data = [
  { timestamp: '2023-02-28 00:00:00', a1: 1, a2: 377.8543583 },
  { timestamp: '2023-02-28 14:30:00', a1: 1, a2: null },
  { timestamp: '2023-02-28 15:00:00', a1: 1, a2: null },
  { timestamp: '2023-02-28 15:30:00', a1: 1, a2: null }
];

option = {
  dataset: [
    {source: data}
  ],
  xAxis: {
    type: 'time',
    maxInterval: 1000 * 60 * 60 * 24, // standard resolution of time axis is in milliseconds
    axisLabel: {
      showMaxLabel: true,
    }
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      encode: {
        x: 'timestamp',
        y: 'a1'
      }
    },
  ]
};