CODEWITHSUNDEEP
javascripttypescriptechartsapache-echarts
Greg
Greg

Reputation: 23

How to keep current zoom when updating timeseries? Apache Echarts

How can I keep the current data zoom when I am updating the timeseries data? I have a chart and I update the data every 1 minute but the data zoom resets to 100 every time i update the data. Also how can I change the text color of label of data zoom I cant find the setting for this?[text]

Editor

I want to change that label text color when dragging datazoom. Datazoom

Upvotes: 0

Views: 445

Answers (1)

Matthias Mertens
Matthias Mertens

Reputation: 2551

Without you sharing your code I can only guess that you are also updating the dataZoom component when updating data. On default it should not reset.

What is happening with the standard slider, is that it applies a relative dataZoom (start/end properties) which adjusts the slider if new data is added. If you apply an absolute dataZoom (startValue/endValue properties) the slider is kept on the chosen zoom window.

To change the text color use dataZoom.textStyle.color property.

Example:

const hour = 1000 * 60 * 60;
let counter = 0;
function makeData() {
  const data = Array.from([0,1,2,3,4,5], x => [(counter * 6 + x) * hour, Math.random() * 100]);
  counter++;
  return data;
}
let data = makeData();

option = {
  xAxis: {
    type: 'time'
  },
  yAxis: {},
  dataZoom: {textStyle: {color: 'red'}},
  series: [
    {
      type: 'line',
      data: data,
    }
  ]
};

// set absolute dataZoom
setTimeout(function() {
  myChart.dispatchAction({
    type: 'dataZoom',
    dataZoomIndex: 0,
    startValue: 0,
    endValue: 4* hour
  })
}, 1000);

// append data
setInterval(function() {
  data = data.concat(makeData());
  myChart.setOption({series: [{data: data}]});
}, 2000);

Upvotes: 0

Related Questions