Skip to main content Skip to footer

Changing the Legend Position in JavaScript

Background:

The default position of Wijmo's FlexChart legend is positioned to the right of the chart. Some user may want to customize this position to fit the needs of their application.

Steps to Complete:

1. Initialize your FlexChart and bind data to the legend

2. Set the position property of the legend

Getting Started:

Initialize your FlexChart and bind data to the legend

In order to customize the position of the legend, you have to provide the legend with data to be customized. Start by initializing your FlexChart and setting the itemSource property. Next, set the series property. This data will be used to fill the legend.

myChart.initialize({
    itemsSource: getData(),
    bindingX: 'country',
    series: [
      {
        binding: '2014',
        name: '2014',
      },
      {
        binding: '2015',
        name: '2015',
      },
      {
        binding: '2016',
        name: '2016',
      },
    ],
    header: 'Country GDP',
    legend: {
      position: 'Bottom',
    },
    palette: [
      'rgba(42,159,214,1)',
      'rgba(119,179,0,1)',
      'rgba(153,51,204,1)',
      'rgba(255,136,0,1)',
      'rgba(204,0,0,1)',
      'rgba(0,204,163,1)',
      'rgba(61,109,204,1)',
      'rgba(82,82,82,1)',
      'rgba(0,0,0,1)',
    ],
  });

 

Your FlexChart should look something like this:

Default Legend Position

 

Set the position property of the legend

Wijmo's FlexChart is very customizable with minimal adjustments to code. By using the built in properties of the FlexChart legend, you are able to make quick and meaningful adjustments to your chart. Use the position property of the legend class to set whether or where the legend appears in relation to the chart's plot area.

With the position property, you have the option to set the legend to a variety of orientations. Additionally, setting the position to None will cause the legend to not appear.

legend: {
      position: 'Bottom',
    },

 

With this property set, your FlexChart should look something like this:

Legend Position Bottom

And that's all you have to do! If you would like to see the reference code, you can find it here on StackBlitz.

Happy coding!

Andrew Peterson

Technical Engagement Engineer