Range Slider custom legend

plotly.js
1

Hi

Need help to custom RangeSlider legend:

var aRSliderOptions = {‘buttons’: [{‘step’: ‘month’, ‘stepmode’: ‘backward’, ‘count’: 1, ‘label’: ‘1m’},
{‘step’: ‘month’, ‘stepmode’: ‘backward’, ‘count’: 6, ‘label’: ‘6m’},
{‘step’: ‘year’, ‘stepmode’: ‘todate’, ‘count’: 1, ‘label’: ‘YTD’},
{‘step’: ‘year’, ‘stepmode’: ‘backward’, ‘count’: 1, ‘label’: ‘1y’ },
{‘step’: ‘all’}]};

var aRSliderData1 = [{‘mode’: ‘lines’,
‘x’: [new Date(‘2019-11-20’), new Date(‘2019-11-21’), new Date(‘2019-11-22’)],
‘y’: [1, 2, 3]},
{‘mode’: ‘lines’,
‘x’: [new Date(‘2019-11-22’), new Date(‘2019-11-23’), new Date(‘2019-11-24’)],
‘y’: [3, 2, 1]}];
var aRSliderLayout = {‘title’: ‘Chart title’, ‘autosize’: true, ‘margin’: {‘l’: 40, ‘r’: 70, ‘b’: 0, ‘t’: 0, ‘pad’: 4}, ‘showlegend’: true,
‘xaxis’: {‘title’: ‘X title’, ‘rangeselector’: aRSliderOptions, ‘rangeslider’: {}},
‘yaxis’: {‘side’: ‘left’, ‘fixedrange’: true, ‘title’: ‘Left title’},
‘yaxis2’: {‘side’:‘right’,‘title’:‘title #1’,‘titlefont’:{‘color’: ‘#795548’}}};

Plotly.newPlot(div, aRSliderData1, aRSliderLayout);

Chart title, yaxis title work fine, but no way to change trace 0 and trace 1 label, on the left (see screenshot).

RS-legend
RS-legend1207×443 72.3 KB

Is there a way to change those labels in my JS snippet ?

2

Use the name attribute.

var aRSliderData1 = [{‘mode’: ‘lines’, ‘name’: ‘#1’,
‘x’: [new Date(‘2019-11-20’), new Date(‘2019-11-21’), new Date(‘2019-11-22’)],
‘y’: [1, 2, 3]},
{‘mode’: ‘lines’, ‘name’: ‘#2’,
‘x’: [new Date(‘2019-11-22’), new Date(‘2019-11-23’), new Date(‘2019-11-24’)],
‘y’: [3, 2, 1]}];

RangeSlider #testcase2