CODEWITHSUNDEEP
javascriptplotlyplotly.js
Paul_LayLow
Paul_LayLow

Reputation: 133

Show individual names in legend

I'd like to show the city names in the legend of the map. When I add the 'name' parameter, it will only show one. I do have my own dataset but it's tied to a SQL server so I'm using plotly's example code but still can't get it to appear there.

https://codepen.io/anon/pen/LKrLRa

Here in the data, I added the 'name' array:

   var data = [{
        type: 'scattergeo',
        mode: 'markers+text',
        text: [
            'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
            'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
        ],
        lon: [
            -73.57, -79.24, -123.06, -114.1, -113.28,
            -75.43, -63.57, -123.21, -97.13, -104.6
        ],
        lat: [
            45.5, 43.4, 49.13, 51.1, 53.34, 45.24,
            44.64, 48.25, 49.89, 50.45
        ],
        marker: {
            size: 7,
            color: [
                '#bebada', '#fdb462', '#fb8072', '#d9d9d9', '#bc80bd',
                '#b3de69', '#8dd3c7', '#80b1d3', '#fccde5', '#ffffb3'
            ],
            line: {
                width: 1
            }
        },
        name: [
            'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
            'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
        ]
    }];

Here in the layout, add the showlegend: true

var layout = {
    title: 'Canadian cities',
    showlegend: true,
    font: {
        family: 'Droid Serif, serif',
        size: 6
    },
    titlefont: {
        size: 16
    },
    geo: {
        scope: 'north america',
        resolution: 50,
        lonaxis: {
            'range': [-130, -55]
        },
        lataxis: {
            'range': [40, 70]
        },
        showrivers: true,
        rivercolor: '#fff',
        showlakes: true,
        lakecolor: '#fff',
        showland: true,
        landcolor: '#EAEAAE',
        countrycolor: '#d3d3d3',
        countrywidth: 1.5,
        subunitcolor: '#d3d3d3'
    }
};

Upvotes: 1

Views: 425

Answers (1)

tuhin47
tuhin47

Reputation: 6058

Here your data list should consist of separate objects to show multiple legends. Here I tried with 3 objects in data and there are 3 legends. So you should make your data list correctly.

var data = [{
  type: 'scattergeo',
  mode: 'markers+text',
  text: [
    'Montreal'
  ],
  lon: [-73.57],
  lat: [
    45.5
  ],
  marker: {
    size: 7,
    color: [
      '#bebada'
    ],
    line: {
      width: 1
    }
  },
  name: 'Montreal',

  textposition: [
    'top right'
  ],
}, {
  type: 'scattergeo',
  mode: 'markers+text',
  text: [
    'Toronto'
  ],
  lon: [-79.24],
  lat: [
    43.4
  ],
  marker: {
    size: 7,
    color: [
      '#fdb462'
    ],
    line: {
      width: 1
    }
  },
  name: 'Toronto',

  textposition: [
    'top left'
  ],
}, {
  type: 'scattergeo',
  mode: 'markers+text',
  text: [
    'Vancouver'
  ],
  lon: [-123.06],
  lat: [
    49.13
  ],
  marker: {
    size: 7,
    color: [
      '#fb8072'
    ],
    line: {
      width: 1
    }
  },
  name: 'Vancouver',
  textposition: [
    'top center'
  ],
}];


var layout = {
  title: 'Canadian cities',
  showlegend: true,
  font: {
    family: 'Droid Serif, serif',
    size: 6
  },
  titlefont: {
    size: 16
  },
  geo: {
    scope: 'north america',
    resolution: 50,
    lonaxis: {
      'range': [-130, -55]
    },
    lataxis: {
      'range': [40, 70]
    },
    showrivers: true,
    rivercolor: '#fff',
    showlakes: true,
    lakecolor: '#fff',
    showland: true,
    landcolor: '#EAEAAE',
    countrycolor: '#d3d3d3',
    countrywidth: 1.5,
    subunitcolor: '#d3d3d3'
  }
};

Plotly.newPlot('myDiv', data, layout, {
  showSendToCloud: true
});
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <!-- Plotly chart will be drawn inside this DIV -->
  <div id="myDiv"></div>
</body>

Upvotes: 2

Related Questions