Adjusting dates in X Axis Plotly

Question

I was wondering how can you achieve the following:

I'm using a Date format of year and month ( i.e 2022-01), but Plotly is not providing an option to have a simple date value for the x Axis, Chart.JS actually allows you to define the date by month, so what is happening is that if you zoom in to one month, then you can see days and even hours, so how do I change that?
Secondly, is there a way to control how the X-axis is displayed?, for example perhaps when you have more than one year is better to show quarters, but as you zoom in for a 1-year period, then I would like to see every month display?, but I don't want to have more granularity, I would like to have only the month display in the graph

var Deals = {
 x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
 y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
 name: 'Deals',
 type: 'bar',
 marker: {
  color: 'rgb(0,131,117)',
 }
};

var Leads = {
 x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
 y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
 name: 'Leads',
 type: 'bar',
 marker: {
  color: 'rgb(160,220,210)',
 }
};

var Cumulative = {
 x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
 y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
 name: 'Cumulative Deals',
 type: 'line',
 marker: {
  color: 'rgb(0,131,117)',
    }
};

var data = [Deals,Leads,Cumulative];

var layout = {
 title: "Sales Forecast",
 barmode: 'stack',
 xaxis: {
    autorange: true,
    rangeselector: {
  buttons: [{
    step: 'all'
    },
    {
        count: 1, 
      label: 'YTD', 
      step: 'year', 
      stepmode: 'todate'
     },
     {
        count: 6,
      label: '6m',
      step: 'month',
      stepmode: 'todate'
      }]},
      rangeslider: { }, 
      type: 'date', 
      tickfont:{ 
            size: 14 
        }, 
      }, 
      yaxis: {
        tickfont:{size: 14}
        }
      };

Plotly.newPlot('DivBarChart', data,layout);```

user_17066122 · Answer

You code was mostly right the only thing that needed fixing is the scrollZoom: true. The code won't work unless you put scrollZoom: true because the function won't be active unless specified. You need this so you can enable it for your graph. You need to select the timeframe using you mouse. Click and drag to see your timeframe.

var Deals = {
  x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
  y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
  name: 'Deals',
  type: 'bar',
  marker: {
    color: 'rgb(0,131,117)',

  }
};
var Leads = {
  x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
  y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
  name: 'Leads',
  type: 'bar',
  marker: {
    color: 'rgb(160,220,210)',

  }
};

var Cumulative = {
  x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
  y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
  name: 'Cumulative Deals',
  type: 'line',
  marker: {
    color: 'rgb(0,131,117)',
  }

};

var data = [Deals, Leads, Cumulative];

var layout = {
  title: "Sales Forecast",
  barmode: 'stack',
};

Plotly.newPlot('DivBarChart', data, layout, {
  scrollZoom: true
});

See scroll and zoom in or plotly.js docs for more information.

Adjusting dates in X Axis Plotly

1 Answers