Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
196
rated 0 times [  199] [ 3]  / answers: 1 / hits: 16889  / 6 Years ago, thu, november 15, 2018, 12:00:00

I want to display the legend on the top of chart, but under the title. I looked for the API, and did not find anything related changing position, but only setting orientation.





var myData = [
{
fcst_valid_local: 2013-01-04 22:23:00,
pop: 20,
temp: 38,
},
{
fcst_valid_local: 2013-02-04 22:23:00,
pop: 15,
temp: 39,
},
{
fcst_valid_local: 2013-03-04 22:23:00,
pop: 2,
rh: 70,
}

];

var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];

var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {orientation: 'h', side: 'top'}
};

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

    <script src=https://cdn.plot.ly/plotly-latest.min.js></script>

<div id=myDiv style=width: 480px; height: 400px;><!-- Plotly chart will be drawn inside this DIV --></div>




More From » plotly

 Answers
123

You can position the legend by setting its x and y values. For your graph it would be something like:



legend: {x: 0.4, y: 1.2}




var myData = [
{
fcst_valid_local: 2013-01-04 22:23:00,
pop: 20,
temp: 38,
},
{
fcst_valid_local: 2013-02-04 22:23:00,
pop: 15,
temp: 39,
},
{
fcst_valid_local: 2013-03-04 22:23:00,
pop: 2,
rh: 70,
}

];

var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];

var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {x: 0.4, y: 1.2}
};

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

<script src=https://cdn.plot.ly/plotly-latest.min.js></script>
<div id=myDiv style=width: 480px; height: 400px;>




[#53111] Saturday, November 10, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
noel

Total Points: 49
Total Questions: 90
Total Answers: 104

Location: Aland Islands
Member since Wed, Nov 17, 2021
3 Years ago
noel questions
;