Plotly Tip #1: dtick
About Plot.ly
Plot.ly is a company that has created a set of open-source libraries for creating graphs in languages like Python, R, and client-side JavaScript. It’s built on top of the popular d3 and stack.gl libraries, renders charts in SVG and WebGL, and targets compatibility for most of its features as far back as IE 9.
Plotly Tips
I’ve found that many more questions arise than can be easily answered from the plotly.js documentation and forum. So I’m putting together a series of small examples and code snippets that have helped my solved some of my data visualization problems.
Issue #1
When creating a time series chart, axis labels and ticks need to be presented in a human-readable fashion. For example, these axis ticks:
My problem specifically was with plotly’s automatic range scaling, especially when zooming in and out of a chart.
In this example, the issue isn’t with formatting but instead with years appearing multiple times. What we really want is for years to appear once.
It’s actually very simple to accomplish this in plotly using the dtick (short for delta [∆] tick) attribute that applies to a chart’s layout object and can be set to a “number or categorical coordinate string.” This means you can set it to numbers like “0.5,” “100,” etc. For type: 'date' charts you can also use numbers, i.e. “86400000.0” is one day (in milliseconds), or you can use the M# syntax, where M is short for months. To accomplish what is captured in the above screenshots I used M12 (one year/ 12 months).
