Black Lives Matter. Please consider donating to Black Girls Code today.

Time series: display the year as of December 31st

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 !

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

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).

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

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.

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 !