How to configure a DataZoom component in a chart that can be used on a mobile device?

Question Description

For a simple line chart like this one, how do I configure the DataZoom component? Can the DataZoom component be used for interaction on mobile devices?

Solution

The solutions of different chart libraries vary. Based on the demo you provided, in VChart, you only need to configure dataZoom to display the component. To make the interaction more user-friendly for mobile devices, you can enable the configuration of roam: true.

Code Example

const spec = {
  type: "line",
  data: {
    values: [
      {
        time: "2:00",
        value: 8
      },
      {
        time: "4:00",
        value: 9
      },
      {
        time: "6:00",
        value: 11
      },
      {
        time: "8:00",
        value: 14
      },
      {
        time: "10:00",
        value: 16
      },
      {
        time: "12:00",
        value: 17
      },
      {
        time: "14:00",
        value: 17
      },
      {
        time: "16:00",
        value: 16
      },
      {
        time: "18:00",
        value: 15
      }
    ]
  },
  xField: "time",
  yField: "value",
  dataZoom: [
    {
      orient: "bottom",
      filterMode: "filter",
      roam: true
    }
  ]
};