Start Zoomed in about chartjs-plugin-zoom HOT 9 CLOSED

@itnassol I want t do the same. Can you please share your code? It will be helpful.
Thanks :)

I needed the flexibility of different zoom levels, I achieved this by setting up a drop down that asks how many years to display, 1 year 5 years etc, then calculated the start date and set up the code as follows.

xAxes:[
{
type: 'time',
time: {
'zoom') { ?>min: '',
tooltipFormat: 'll',
displayFormats: {
quarter: 'MMM YYYY',
}
},

by echoing the integer of the number of years the graph "zooms" in but the old data is still there to scroll to.

hope this helps.

from chartjs-plugin-zoom.

Have you tried setting the suggestedMin and suggestedMax scale ticks settings?

http://www.chartjs.org/docs/#scales-linear-scale

from chartjs-plugin-zoom.

I will try that, thank you for the suggestion

from chartjs-plugin-zoom.

Hi,
I took a look at that and it seems that is for linear scales, my fault my X axis is time based.

However there is in the documentation a Min and Max for the time scale, just not sure of the format if anyone can help, that would be good.

scales: {
xAxes:[
{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY',
min: '04 2010', /// This is the fprmat I can't find.
}
},

from chartjs-plugin-zoom.

Finally worked this out.

In the scales options section you need to add a min integer when used with the zoom function this then still renders the graph outside of the canvas, ready for panning.

scales: {
xAxes:[
{
type: 'time',
time: {
min: '2',
tooltipFormat: 'll',
displayFormats: {
quarter: 'MMM YYYY',
}
},
As long as your "Type" is time this worked for me.

from chartjs-plugin-zoom.

@itnassol I want t do the same. Can you please share your code? It will be helpful.
Thanks :)

from chartjs-plugin-zoom.

@itnassol I want t do the same. Can you please share your code? It will be helpful.
Thanks :)

What do you mean by specifying min '2' with time-series data?

from chartjs-plugin-zoom.

@itnassol Thanks for your reply but I am not able to understand 'zoom') { ?>min: '',
Can you please explain this.
Thanks

from chartjs-plugin-zoom.

@sureshzebpay Probably it's too late, I am having the same issue.
What @itnassol means by min value is the minimum value from which your chart should start displaying data.

so if you label is [1,2,3,4,5,6,7,8,9,10];

and you set min value in ticks

scales: {
          xAxes: [
            {
               ticks: {
                min: '4'

Then your chart will start displaying data from 4 on the x-axis, which means it won't start with 1 but from 4 in the labels.
So basically you are setting the range of the charts from 4(min - starting point) to 10 (being the last element)

from chartjs-plugin-zoom.