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:
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:
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