Time series: display the year as of December 31st

plotly.js
1

On the x-axis I display a time series. My data is year-to-date. Each “tick” displays the year (1980, 1981, 1982, …). By default these “ticks” display the 1st of January of the year displayed. I would like these “ticks” to display on December 31 of the year displayed.
A solution ?

Thanks !

2

Here’s an example: http://codepen.io/etpinard/pen/RoyEWG

3

Thank you ! I’m not sure I understand the logic.
However, my problem seems to me more generic. What I am looking for is to globally modify the display system of the years on the x axis.

See graph and datas … and my x-axis display parameters :

              yaxis: {
                        tickfont: {
                            color:"rgba(87, 87, 86, 1)",
                            family:'Arial',
                            size:12
                        },
                        showticksuffix:'none',
                        exponentformat:'none',
                        separatethousands:' ',                
                        ticklen	:5,
                        ticks: 'outside',
                        gridwidth: 1,
                        gridcolor:"rgba(238, 238, 238, 1)",
                        showline: true,
                        linewidth:2, /* epaisseur de la ligne d'axe */
                        linecolor:"rgba(153, 153, 153, 1)",
                        rangemode:'tozero', /* force l'axe à 0 */
                        fixedrange: true
              },

As can be seen, the display of “1990” on the x-axis corresponds to 1 January 1990, and for a consistency of display, I would like “1990” to correspond to 31 December 1990 … and this for all Years, automatically. (Without having to “force” them one by one).

4

Looks like you’re looking for the tickformat attribute. Here’s an example: http://codepen.io/etpinard/pen/qqYwXO?

5

I am doubly sorry: I have difficulty explaining my problem and I have displayed the parameters of the y-axis instead of the x-axis!

I have modified my files to make it more explicit. Clearly the discrepancy between the axis display (eg 01/01/1990) and the flyover display (31/12/1989). I would like the axis to display the years to 31/12 systematically!

See graph and datas … and my x-axis display parameters :

         xaxis: {
                    type:"date",
                    tickmode: 'auto',
                    ticklen	:5,
                    nticks:8,
                    tickformat: '%d/%m/%Y',
                    hoverformat: '%d/%m/%Y',
                    showticklabels: true,
                    tick0: "1970-12-31",
                    dtick: "M12",
                    ticks: 'outside',
                    tickfont: {
                        color:"rgba(87, 87, 86, 1)",
                        family:'Arial',
                        size:12
                    },
                    gridwidth: 1,
                    gridcolor:"rgba(238, 238, 238, 1)",
                    showline: true,
                    linewidth:2,
                    linecolor:"rgba(153, 153, 153, 1)",
                    rangeselector: selectorOptions,
                    rangeslider: {
                        visible: true,
                        bgcolor: "#EFEFEF",
                        borderwidth : 0,
                        thickness:0.1
          }

Moreover, tick0 and dtick do not seem to have any effect on my views.

Thank you very much for your interventions.

6

In addition to the tracks indicated by Étienne, here are some additional elements:

https://jsfiddle.net/senaphet/eq0v9bgn/3/

Tickmode / nticks are not compatible with tick0 / dtick

Tick0 defines an origin point (not used in the display)
Dtick determines the display of ticks from this point of origin

So I obtain ticks display on 31 dec of each year (origin set at 1970-12-31, displaying ticks every four months) but I lose, for zoom, the automatic display of ticks (they remain , Even in zoom set at 4 months).

Is there not an possibility to combine both?

Thanks !