diff --git a/src/components/drawing/symbol_defs.js b/src/components/drawing/symbol_defs.js
index b3ee11b60c4..c241e36cffb 100644
--- a/src/components/drawing/symbol_defs.js
+++ b/src/components/drawing/symbol_defs.js
@@ -482,5 +482,81 @@ module.exports = {
needLine: true,
noDot: true,
noFill: true
+ },
+ 'arrow-up': {
+ n: 45,
+ f: function(r) {
+ var rx = d3.round(r, 2);
+ var ry = d3.round(r * 2, 2);
+ return 'M0,0L-' + rx + ',' + ry + 'H' + rx + 'Z';
+ },
+ noDot: true
+ },
+ 'arrow-down': {
+ n: 46,
+ f: function(r) {
+ var rx = d3.round(r, 2);
+ var ry = d3.round(r * 2, 2);
+ return 'M0,0L-' + rx + ',-' + ry + 'H' + rx + 'Z';
+ },
+ noDot: true
+ },
+ 'arrow-left': {
+ n: 47,
+ f: function(r) {
+ var rx = d3.round(r * 2, 2);
+ var ry = d3.round(r, 2);
+ return 'M0,0L' + rx + ',-' + ry + 'V' + ry + 'Z';
+ },
+ noDot: true
+ },
+ 'arrow-right': {
+ n: 48,
+ f: function(r) {
+ var rx = d3.round(r * 2, 2);
+ var ry = d3.round(r, 2);
+ return 'M0,0L-' + rx + ',-' + ry + 'V' + ry + 'Z';
+ },
+ noDot: true
+ },
+ 'arrow-bar-up': {
+ n: 49,
+ f: function(r) {
+ var rx = d3.round(r, 2);
+ var ry = d3.round(r * 2, 2);
+ return 'M-' + rx + ',0H' + rx + 'M0,0L-' + rx + ',' + ry + 'H' + rx + 'Z';
+ },
+ needLine: true,
+ noDot: true
+ },
+ 'arrow-bar-down': {
+ n: 50,
+ f: function(r) {
+ var rx = d3.round(r, 2);
+ var ry = d3.round(r * 2, 2);
+ return 'M-' + rx + ',0H' + rx + 'M0,0L-' + rx + ',-' + ry + 'H' + rx + 'Z';
+ },
+ needLine: true,
+ noDot: true
+ },
+ 'arrow-bar-left': {
+ n: 51,
+ f: function(r) {
+ var rx = d3.round(r * 2, 2);
+ var ry = d3.round(r, 2);
+ return 'M0,-' + ry + 'V' + ry + 'M0,0L' + rx + ',-' + ry + 'V' + ry + 'Z';
+ },
+ needLine: true,
+ noDot: true
+ },
+ 'arrow-bar-right': {
+ n: 52,
+ f: function(r) {
+ var rx = d3.round(r * 2, 2);
+ var ry = d3.round(r, 2);
+ return 'M0,-' + ry + 'V' + ry + 'M0,0L-' + rx + ',-' + ry + 'V' + ry + 'Z';
+ },
+ needLine: true,
+ noDot: true
}
};
diff --git a/test/image/baselines/arrow-markers.png b/test/image/baselines/arrow-markers.png
new file mode 100644
index 00000000000..b8dcf19a03c
Binary files /dev/null and b/test/image/baselines/arrow-markers.png differ
diff --git a/test/image/mocks/arrow-markers.json b/test/image/mocks/arrow-markers.json
new file mode 100644
index 00000000000..83399e1d62b
--- /dev/null
+++ b/test/image/mocks/arrow-markers.json
@@ -0,0 +1,235 @@
+{
+ "data": [
+ {
+ "type": "scatter",
+ "mode": "lines+markers",
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "marker": {
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "color": "yellow",
+ "size": [
+ 40,
+ 40,
+ 40,
+ null,
+ 40,
+ 40,
+ 40
+ ],
+ "symbol": [
+ 0,
+ "arrow-up",
+ "arrow-down",
+ null,
+ 100,
+ 145,
+ 146
+ ]
+ },
+ "x": [
+ 0,
+ 0,
+ 0,
+ null,
+ 1,
+ 1,
+ 1
+ ],
+ "y": [
+ 0,
+ 1,
+ -1,
+ null,
+ 0,
+ 1,
+ -1
+ ]
+ },
+ {
+ "type": "scatter",
+ "mode": "lines+markers",
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "marker": {
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "color": "yellow",
+ "size": [
+ 40,
+ 40,
+ 40,
+ null,
+ 40,
+ 40,
+ 40
+ ],
+ "symbol": [
+ 0,
+ "arrow-bar-up",
+ "arrow-bar-down",
+ null,
+ 100,
+ 149,
+ 150
+ ]
+ },
+ "x": [
+ 0,
+ 0,
+ 0,
+ null,
+ 1,
+ 1,
+ 1
+ ],
+ "y": [
+ 0,
+ 1,
+ -1,
+ null,
+ 0,
+ 1,
+ -1
+ ],
+ "xaxis": "x2",
+ "yaxis": "y2"
+ },
+ {
+ "type": "scatter",
+ "mode": "lines+markers",
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "marker": {
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "color": "yellow",
+ "size": [
+ 40,
+ 40,
+ 40,
+ null,
+ 40,
+ 40,
+ 40
+ ],
+ "symbol": [
+ 0,
+ "arrow-right",
+ "arrow-left",
+ null,
+ 100,
+ 148,
+ 147
+ ]
+ },
+ "y": [
+ 0,
+ 0,
+ 0,
+ null,
+ 1,
+ 1,
+ 1
+ ],
+ "x": [
+ 0,
+ 1,
+ -1,
+ null,
+ 0,
+ 1,
+ -1
+ ],
+ "xaxis": "x3",
+ "yaxis": "y3"
+ },
+ {
+ "type": "scatter",
+ "mode": "lines+markers",
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "marker": {
+ "line": {
+ "width": 5,
+ "color": "black"
+ },
+ "color": "yellow",
+ "size": [
+ 40,
+ 40,
+ 40,
+ null,
+ 40,
+ 40,
+ 40
+ ],
+ "symbol": [
+ 0,
+ "arrow-bar-right",
+ "arrow-bar-left",
+ null,
+ 100,
+ 152,
+ 151
+ ]
+ },
+ "y": [
+ 0,
+ 0,
+ 0,
+ null,
+ 1,
+ 1,
+ 1
+ ],
+ "x": [
+ 0,
+ 1,
+ -1,
+ null,
+ 0,
+ 1,
+ -1
+ ],
+ "xaxis": "x4",
+ "yaxis": "y4"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "arrow and arrow-bar markers"
+ },
+ "showlegend": false,
+ "width": 800,
+ "height": 800,
+ "margin": {
+ "t": 80,
+ "b": 40,
+ "l": 40,
+ "r": 40
+ },
+ "grid": {
+ "rows": 2,
+ "columns": 2,
+ "xgap": 0.1,
+ "ygap": 0.1,
+ "pattern": "independent"
+ }
+ }
+}
diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js
index eb7abbbfa29..bb91ef44ee2 100644
--- a/test/jasmine/tests/mock_test.js
+++ b/test/jasmine/tests/mock_test.js
@@ -38,6 +38,7 @@ var list = [
'animation_bar',
'annotations',
'annotations-autorange',
+ 'arrow-markers',
'automargin-mirror-all',
'automargin-mirror-allticks',
'automargin-multiline-titles',
@@ -1081,6 +1082,7 @@ figs['animation'] = require('@mocks/animation');
figs['animation_bar'] = require('@mocks/animation_bar');
// figs['annotations'] = require('@mocks/annotations');
// figs['annotations-autorange'] = require('@mocks/annotations-autorange');
+figs['arrow-markers'] = require('@mocks/arrow-markers');
figs['automargin-mirror-all'] = require('@mocks/automargin-mirror-all');
figs['automargin-mirror-allticks'] = require('@mocks/automargin-mirror-allticks');
figs['automargin-multiline-titles'] = require('@mocks/automargin-multiline-titles');