Starting with a zoomed in range is not working

[ADumaine]

I have been through the issues, searched many posts, and have tried many different configurations and still cannot get the chart to start with a specific subset range and then allow the user to pan or zoom from there.

The data set has a date and a number and has a few years of data (1526 entries). My goal is to start with only the last 180 entries (6 months) and allow the user to pan to the left for older entries or zoom on the current data displayed. Zooming and panning work fine if there is no attempt to try so start zoomed in.

Is there a guide and/or example that clearly explains what the configuration and value and value types need to be?
I don't understand the impact and effect of min with the zoom plugin on the min in the axis options.

If this only works with a time series, I have tried configuring it that way but when I check the chartPerDay.scales.x.type it is set to 'category'. It is unclear to me what chartjs expects to set up for a time series.

The config here has some commented settings to show some of the values I have tried.

var chartPerDay = new Chart(ctxPerDay, {
    type: 'line',
    data: {
      datasets: [{
        label: 'Avg Block Time',
        data: dataPerDay,
      }]
    },
    options: {
      parsing: {
        xAxisKey: 'date',
        yAxisKey: 'avgMinutes'
      },
      scales: {
        // xAxes: [
        // {
        //   type: 'time',
        //   // min: 1347,
        //   ticks: {
        //     min: 1347,
        //   },
        //   time: { displayFormats: {
        //     hour: 'HH:mm',
        //     minute: 'HH:mm',
        //     second: 'HH:mm:ss'
        //   }}
        // }],
        x: {
          type: 'category',
            suggestedMin: "2021-02-07",
            suggesetedMax: "2021-08-05",
          //  min: 1347,
          //  max: 1500,
          // suggestedMin: 1347,
          // suggestedMax: 1526
        },
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        title: {
          display: true,
          text: 'Average Block Times Per Day',
          position: 'bottom'
        },
        zoom: {
          pan: {
            // pan options and/or events
            enabled: true,
            mode: 'x',
          },
          zoom: {
            drag: {
              enabled: false
            },
            wheel: {
              enabled: true,
            },
            pinch: {
              enabled: true
            },
            mode: 'x',
            // min: 1347,
          }
        }
      }
    }
  });

Sample data.

[{
"date": "2017-06-01",
"blocks": 626,
"avgMinutes": 2.3003
},
{
"date": "2017-06-02",
"blocks": 560,
"avgMinutes": 2.5714
},
{
"date": "2017-06-03",
"blocks": 589,
"avgMinutes": 2.4448
},
{
"date": "2017-06-04",
"blocks": 570,
"avgMinutes": 2.5263
},
{
"date": "2017-06-05",
"blocks": 603,
"avgMinutes": 2.3881
},
{
"date": "2017-06-06",
"blocks": 567,
"avgMinutes": 2.5397
}]

With the suggestedMin: "2021-02-07" the label is changed on the first tick but the data is still from the first data point and then returns to 2017.

With scales: {x: min: 1347, max: 1526,}} the chart starts with the first data point from the full set and is completely zoomed out

Any help is greatly appreciated!

[kurkle]

Your commented out time-scale config is in chart.js v2 format, that is why it does not work. The min and max for category scale (that you are actually using) are either labels or label indices in. I'm not sure what 1347 and 1526 are, are those indices?

With time scale, the min/max are in the same format as data, or in timestamps (=number, microseconds since 1.1.1970)

https://codepen.io/kurkle/pen/abJmpgZ

[ADumaine]

Thank you for the clarifications!

Category
Category still does not work. The chart loads completely zoomed in with only two x ticks (those specified in the min, max). Zooming out pulls in the data from the start of the full data set rather than the starting point of the min. e.g. chart starts with two ticks "2021-02-07", "2021-08-05" and when zooming out the next ticks start at "2017-06-01"

scales

 x: {
           type: 'category',
            min: "2021-02-07",
            max: "2021-08-05",
}

start zooming out

Time
Type = time is now working for me.

Besides the scale config issues you pointed out, I missed loading moment and the adapter.
Got this error on the browser Error: This method is not implemented: Check that a complete date adapter is provided.

Posting example here for others since the only reference I could find on loading these modules are on the chart.js site under RequireJs . It would be very helpful if there were some examples like you have on codepen either on the plugin site or on the main site. That would have saved hours of time.

Loaded these as script tags after the zoom plugin

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>

I also changed the data to an ISO date format:

{
   "avgMinutes": 2.3003,
   "daydate": "2017-06-01T00:00:00.000Z"
},

and the scale:

 x: {
           type: 'time',
           time: { 
            unit: 'day', 
            displayFormats: {
                day: 'YYYY-MM-DD'
              }},
            min: initzoom[0], // ISO date string
            max: initzoom[1]
        },

I will continue with time based, but it sure would be nice to have categories work properly and not have to do all the date manipulation.

Thanks!

[kurkle]

About category, it does not know you are working with dates. Those are just strings to it, so it does not know the order, unless you tell it with the labels array (as shown in https://www.chartjs.org/docs/latest/axes/cartesian/category.html).

[ADumaine]

I changed back to strings, created the label array, removed moment and the moment adapter.

Category is working correctly now.

Thank you so much!