Apexcharts.js: initial zoom value

Created on 15 Dec 2019 · 3Comments · Source: apexcharts/apexcharts.js

Hello,

First of all, great library. I am having a lot of fun implementing the different options available. THANK YOU!

Second - I was wondering if it is possible to set an initial zoom level? I have dug around the docs quite extensively, and (although I am quite blind at finding the appropriate stuff quite often) I have not stumbled across this option/toggle/config anywhere.

The idea is that we would be able to provide an initial zoom when the chart loads. I am currently rendering a candle stick chart - and I have around 20 years of daily data. Obviously, this is quite a lot, but it is the current ask. Funny enough, the chart does load fine (animations turned off, otherwise its hilarious), however, what I would like to look at is it zoomed in to only show, say the last 3 months worth of data. Users can then use the zoomout/pan feature to look farther back.

An option to either set the intial zoom level (calculated via total records / number of records per screen), or the ability to set the amount of candles initially drawn. Thoughts on this?

As a quick aside to this, I have also experienced when only loading daily data for the candle stick, the chart tries to draw weekends as well (which is obviously not available). Is there a way to skip the attempting render of Saturday/Sunday to save a little bit of room? As well - I don't have data any more specific then daily - so is it possible to prevent zooming into the hourly time frame, and stick to just day?

Thanks again!

Source

drew-dulgar

Most helpful comment

To show partial data, you can use the xaxis.range property.
The range property allows you to provide a (max - min) value which will display data between those xaxis dates.

Example

var max = new Date().getTime() // Current timestamp
var min = new Date("2019-09-16").getTime() // timestamp 90 days before

var range = max - min

After getting this range, you will have to make 1 more adjustment in the chart events (otherwise the chart will always be in this range and won't allow zoom in/out)

So, the whole thing becomes

var options = {
  chart: {
    events: {
      beforeZoom: function(ctx) {
        // we need to clear the range as we only need it on the iniital load.
        ctx.w.config.xaxis.range = undefined
      }
    }
  },
  xaxis: {
     range: range
  }
}

Your other question to clear the weekends in the candlestick chart is unfortunately not possible in ApexCharts.

junedchhipa on 16 Dec 2019

👍5

All 3 comments