Question

0

468

Views

Adjusting dates in X Axis Plotly

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);```

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-03-25T14:33:37.059Z

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
});

<div class="col-sm-4">
  <div id='DivBarChart' class="container"></div>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</div>

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

0

468

Adjusting dates in X Axis Plotly

1 answers

0

Find remote jobs

Andres GPT