Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 85f50aa

Browse files
priyatharsanpriyatharsan
authored
Merge pull request plotly#1211 from plotly/tickformatting-doc
Tick-formatting doc for plotly.js
2 parents 906d0a5 + 8c29650 commit 85f50aa

10 files changed

+336
-0
lines changed

‎_posts/plotly_js/layout/tick-format/2018-12-17-array-tickmode.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
name: Tickmode - Array
3+
plot_url: https://codepen.io/plotly/embed/pqEvGV/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 1.5
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
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];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
xaxis: {
20+
tickmode: "array", // If "array", the placement of the ticks is set via `tickvals` and the tick text is `ticktext`.
21+
tickvals: [1, 3, 5, 7, 9, 11],
22+
ticktext: ['One', 'Three', 'Five', 'Seven', 'Nine', 'Eleven']
23+
}
24+
}
25+
26+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/layout/tick-format/2018-12-17-how-to-tick-format-layout.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
name: Layout Attributes with respect to Formatting Ticks
3+
language: plotly_js
4+
suite: tick-formatting
5+
sitemap: false
6+
arrangement: horizontal
7+
order: 0
8+
---
9+
10+
11+
12+
{
13+
xaxis: {
14+
/* Set the tick mode for the axis "auto" or "linear" or "array" */
15+
tickmode: 'auto',
16+
17+
/* Set the placement of the first tick*/
18+
tick0: '',
19+
/* Set the step in-between ticks*/
20+
dtick: '',
21+
/* Specifies the maximum number of ticks */
22+
nticks: 0,
23+
24+
/* Set the values at which ticks on this axis appear */
25+
tickvals: [ /* */ ],
26+
/* Set the text displayed at the ticks position via tickvals */
27+
ticktext: [ /* */ ],
28+
/* Set the source reference for tickvals */
29+
tickvalssrc: '',
30+
/* Set the source reference for ticktext */
31+
tickvtextsrc: '',
32+
33+
/* Set the tick label formatting rule using d3 formatting mini-languages */
34+
tickformat: '',
35+
/* Set the tickformat per zoom level */
36+
tickformatstops: {
37+
enabled: true,
38+
/* Set the range of the dtick values which describe the zoom level, it is possible to omit "min" or "max" value by passing "null" */
39+
dtickrange: ["min", "max"],
40+
/* dtickformat for described zoom level, the same as "tickformat" */
41+
value: string,
42+
},
43+
44+
/* Set the ticks to display with a prefix: "all" or "first" or "last" or "none" */
45+
showtickprefix: 'all',
46+
tickprefix: string,
47+
48+
/* Set the ticks to display with a suffix: "all" or "first" or "last" or "none" */
49+
showticksuffix: 'all',
50+
ticksuffix: string,
51+
52+
/* Determines a formatting rule for the tick exponents: "none" or "e" or "E" or "power" or "SI" or "B" */
53+
exponentformat: 'B',
54+
}
55+
/* similarly for yaxis */
56+
}

‎_posts/plotly_js/layout/tick-format/2018-12-17-how-to-tick-format_index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Formatting Ticks in D3.js-based JavaScript Charts | Examples | Plotly
3+
name: Formatting Ticks
4+
permalink: javascript/tick-formatting/
5+
thumbnail: thumbnail/hover.jpg
6+
description: How to format axes ticks in D3.js-based JavaScript charts.
7+
layout: user-guide
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: false
11+
display_as: layout_opt
12+
arrangement: horizontal
13+
---
14+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tick-formatting" | sort: "order" %}
15+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/layout/tick-format/2018-12-17-include-fr-locale.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
name: Include Locale Config
3+
plot_url: https://codepen.io/plotly/embed/wREMyX/?height=496&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 4.0
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var x = ['2013-02-04', '2013-04-05', '2013-06-06', '2013-08-07', '2013-10-02'];
12+
var y = [1, 4, 3, 6, 2];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
xaxis: {
20+
tickformat: '%a %e %b \n %Y'
21+
}
22+
}
23+
24+
Plotly.newPlot('myDiv', data, layout, {
25+
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
26+
});

‎_posts/plotly_js/layout/tick-format/2018-12-17-linear(date)-tickmode.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
name: Tickmode - Linear (Date)
3+
plot_url: https://codepen.io/plotly/embed/REGPPo/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
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'];
12+
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];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
xaxis: {
20+
tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
21+
tick0: '1999-12-15',
22+
dtick: 30 * 24 * 60 * 60 * 1000 // milliseconds
23+
}
24+
}
25+
26+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/layout/tick-format/2018-12-17-linear-tickmode.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
name: Tickmode - Linear
3+
plot_url: https://codepen.io/plotly/embed/xmEbye/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 0.5
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
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];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
xaxis: {
20+
tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
21+
tick0: 0.5,
22+
dtick: 0.75
23+
}
24+
}
25+
26+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/layout/tick-format/2018-12-17-tickformatstops.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
name: Tickformatstops to customize for different zoom levels
3+
plot_url: https://codepen.io/plotly/embed/roZORo/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 2.75
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var gd = document.getElementById('myDiv');
12+
var x = ["2005-01", "2005-02", "2005-03", "2005-04", "2005-05", "2005-06", "2005-07"];
13+
var y = [-20, 10, -5, 0, 5, -10, 20];
14+
var data = [{
15+
x: x,
16+
y: y,
17+
type: 'scatter'
18+
}];
19+
var layout = {
20+
xaxis: {
21+
tickformatstops: [{
22+
"dtickrange": [null, 1000],
23+
"value": "%H:%M:%S.%L ms"
24+
},
25+
{
26+
"dtickrange": [1000, 60000],
27+
"value": "%H:%M:%S s"
28+
},
29+
{
30+
"dtickrange": [60000, 3600000],
31+
"value": "%H:%M m"
32+
},
33+
{
34+
"dtickrange": [3600000, 86400000],
35+
"value": "%H:%M h"
36+
},
37+
{
38+
"dtickrange": [86400000, 604800000],
39+
"value": "%e. %b d"
40+
},
41+
{
42+
"dtickrange": [604800000, "M1"],
43+
"value": "%e. %b w"
44+
},
45+
{
46+
"dtickrange": ["M1", "M12"],
47+
"value": "%b '%y M"
48+
},
49+
{
50+
"dtickrange": ["M12", null],
51+
"value": "%Y Y"
52+
}
53+
]
54+
}
55+
};
56+
57+
Plotly.plot(gd, data, layout);
58+

‎_posts/plotly_js/layout/tick-format/2018-12-17-using-exponentformat.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
name: Using Exponentformat
3+
plot_url: https://codepen.io/plotly/embed/WLGrbx/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 3.0
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
12+
var y = [68000, 52000, 60000, 20000, 95000, 40000, 60000, 79000, 74000, 42000, 20000, 90000];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
yaxis: {
20+
showexponent: 'all',
21+
exponentformat: 'e'
22+
}
23+
}
24+
25+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/layout/tick-format/2018-12-17-using-tickformat(date).html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
name: Using Tickformat (Date)
3+
plot_url: https://codepen.io/plotly/embed/BvLoBG/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 2.5
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
12+
13+
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function (err, rows) {
14+
15+
function unpack(rows, key) {
16+
return rows.map(function (row) {
17+
return row[key];
18+
});
19+
}
20+
21+
22+
var trace1 = {
23+
type: "scatter",
24+
mode: "lines",
25+
name: 'AAPL High',
26+
x: unpack(rows, 'Date'),
27+
y: unpack(rows, 'AAPL.High'),
28+
line: {
29+
color: '#17BECF'
30+
}
31+
}
32+
33+
var trace2 = {
34+
type: "scatter",
35+
mode: "lines",
36+
name: 'AAPL Low',
37+
x: unpack(rows, 'Date'),
38+
y: unpack(rows, 'AAPL.Low'),
39+
line: {
40+
color: '#7F7F7F'
41+
}
42+
}
43+
44+
var data = [trace1, trace2];
45+
46+
var layout = {
47+
title: 'Time series with custom tickformat',
48+
xaxis: {
49+
tickformat: '%d %B (%a)\n %Y' // For more time formatting types, see: https://github.com/d3/d3-time-format/blob/master/README.md
50+
}
51+
};
52+
53+
Plotly.newPlot('myDiv', data, layout);
54+
})

‎_posts/plotly_js/layout/tick-format/2018-12-17-using-tickformat.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
name: Using Tickformat
3+
plot_url: https://codepen.io/plotly/embed/aPmvJW/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: tick-formatting
6+
order: 2.0
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
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];
13+
var data = [{
14+
x: x,
15+
y: y,
16+
type: 'scatter'
17+
}];
18+
var layout = {
19+
yaxis: {
20+
tickformat: '%' // For more formatting types, see: https://github.com/d3/d3-format/blob/master/README.md#locale_format
21+
}
22+
}
23+
24+
Plotly.newPlot('myDiv', data, layout);

0 commit comments

Comments
 (0)