Formatting Ticks in JavaScript

How to format axes ticks in D3.js-based JavaScript charts.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

{
  xaxis: {
    /* show/hide tick labels (defaults to true) */
    showticklabels: boolean,
    /*  Set the tick mode for the axis "auto" or "linear" or "array" */
    tickmode: 'auto',

    /* Set the placement of the first tick*/
    tick0: '',
    /* Set the step in-between ticks*/
    dtick: '',
    /* Specifies the maximum number of ticks */
    nticks: 0,

    /* Set the values at which ticks on this axis appear */
    tickvals: [ /* */ ],
    /* Set the text displayed at the ticks position via tickvals */
    ticktext: [ /* */ ],
    /* Set the source reference for tickvals */
    tickvalssrc: '',
    /* Set the source reference for ticktext */
    tickvtextsrc: '',

    /* Set the tick label formatting rule using d3 formatting mini-languages */
    tickformat: '',
    /* Set the tickformat per zoom level */
    tickformatstops: {
      enabled: true,
      /* Set the range of the dtick values which describe the zoom level, it is possible to omit "min" or "max" value by passing "null" */
      dtickrange: ["min", "max"],
      /* dtickformat for described zoom level, the same as "tickformat" */
      value: string,
    },

    /* Set the ticks to display with a prefix: "all" or "first" or "last" or "none" */
    showtickprefix: 'all',
    tickprefix: string,

    /* Set the ticks to display with a suffix: "all" or "first" or "last" or "none" */
    showticksuffix: 'all',
    ticksuffix: string,

    /* Determines a formatting rule for the tick exponents: "none" or "e" or "E" or "power" or "SI" or "B" */
    exponentformat: 'B',
  }
  /* similarly for yaxis */
}
Click to copy
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var y = [28.8, 28.5, 37, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  xaxis: {
    tickmode: "linear", //  If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
    tick0: 0.5,
    dtick: 0.75
  }
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
0.51.2522.753.54.2555.756.57.2588.759.510.251111.7512.5304050607080
var x = ['2000-01', '2000-02', '2000-03', '2000-04', '2000-05', '2000-06', '2000-07', '2000-08', '2000-09', '2000-10', '2000-11', '2000-12', '2001-01'];
var y = [-36.5, -26.6, -43.6, -52.3, -71.5, -81.4, -80.5, -82.2, -76, -67.3, -46.1, -35, -40];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  xaxis: {
    tickmode: "linear", //  If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
    tick0: '1999-12-15',
    dtick: 30 * 24 * 60 * 60 * 1000 // milliseconds
  }
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
Dec 151999Jan 142000Feb 13Mar 14Apr 13May 13Jun 12Jul 12Aug 11Sep 10Oct 10Nov 9Dec 9Jan 82001−80−70−60−50−40−30
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var y = [28.8, 28.5, 37, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  xaxis: {
    tickmode: "array", // If "array", the placement of the ticks is set via `tickvals` and the tick text is `ticktext`.
    tickvals: [1, 3, 5, 7, 9, 11],
    ticktext: ['One', 'Three', 'Five', 'Seven', 'Nine', 'Eleven']
  }
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
OneThreeFiveSevenNineEleven304050607080
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var y = [0.18, 0.38, 0.56, 0.46, 0.59, 0.4, 0.78, 0.77, 0.74, 0.42, 0.45, 0.39];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  yaxis: {
    tickformat: '%' // For more formatting types, see: https://github.com/d3/d3-format/blob/master/README.md#locale_format
  }
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
2468101220.000000%30.000000%40.000000%50.000000%60.000000%70.000000%80.000000%
d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function (err, rows) {

  function unpack(rows, key) {
    return rows.map(function (row) {
      return row[key];
    });
  }


  var trace1 = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL High',
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'AAPL.High'),
    line: {
      color: '#17BECF'
    }
  }

  var trace2 = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL Low',
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'AAPL.Low'),
    line: {
      color: '#7F7F7F'
    }
  }

  var data = [trace1, trace2];

  var layout = {
    title: {text: 'Time series with custom tickformat'},
    xaxis: {
      tickformat: '%d %B (%a)\n %Y' // For more time formatting types, see: https://github.com/d3/d3-time-format/blob/master/README.md
    }
  };

  Plotly.newPlot('myDiv', data, layout);
})
Click to copy
01 July (Wed) 201501 January (Fri) 201601 July (Fri)01 January (Sun) 201790100110120130
AAPL HighAAPL LowTime series with custom tickformat
var gd = document.getElementById('myDiv');
var x = ["2005-01", "2005-02", "2005-03", "2005-04", "2005-05", "2005-06", "2005-07"];
var y = [-20, 10, -5, 0, 5, -10, 20];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  xaxis: {
    tickformatstops: [{
        "dtickrange": [null, 1000],
        "value": "%H:%M:%S.%L ms"
      },
      {
        "dtickrange": [1000, 60000],
        "value": "%H:%M:%S s"
      },
      {
        "dtickrange": [60000, 3600000],
        "value": "%H:%M m"
      },
      {
        "dtickrange": [3600000, 86400000],
        "value": "%H:%M h"
      },
      {
        "dtickrange": [86400000, 604800000],
        "value": "%e. %b d"
      },
      {
        "dtickrange": [604800000, "M1"],
        "value": "%e. %b w"
      },
      {
        "dtickrange": ["M1", "M12"],
        "value": "%b '%y M"
      },
      {
        "dtickrange": ["M12", null],
        "value": "%Y Y"
      }
    ]
  }
};

Plotly.newPlot("myDiv", data, layout);

Click to copy
1. Jan w 1. Feb w 1. Mar w 1. Apr w 1. May w 1. Jun w 1. Jul w−20−1001020
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var y = [68000, 52000, 60000, 20000, 95000, 40000, 60000, 79000, 74000, 42000, 20000, 90000];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  yaxis: {
    showexponent: 'all',
    exponentformat: 'e'
  }
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
246810120.2e+50.4e+50.6e+50.8e+51e+5
var x = ['2013-02-04', '2013-04-05', '2013-06-06', '2013-08-07', '2013-10-02'];
var y = [1, 4, 3, 6, 2];
var data = [{
  x: x,
  y: y,
  type: 'scatter'
}];
var layout = {
  xaxis: {
    tickformat: '%a %e %b \n %Y'
  }
}

Plotly.newPlot('myDiv', data, layout, {
  locale: 'fr' // For more info, see: https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization and https://github.com/plotly/plotly.js/tree/master/dist
});
Click to copy
Fri 1 Mar 2013Wed 1 May Mon 1 Jul Sun 1 Sep 123456