Changing the FlexChart Legend Position in Vue

Background:

The default position of Wijmo's FlexChart legend is Right. In Vue apps, you may want to move the legend to better fit your layout.

Steps to Complete:

1. Initialize your FlexChart and bind data to the legend

2. Set the position property of the legend

Getting Started:

Packages needed: @mescius/wijmo, @mescius/wijmo.vue3.chart, and @mescius/wijmo.styles

Initialize your FlexChart and bind data to the legend

To customize the legend position in Vue, render a wj-flex-chart and bind it to reactive data in your component. Set itemsSource, bindingX, and add wj-flex-chart-series entries. This data drives what appears in the legend.

// App.vue
<template>
  <div style="padding: 16px">
    <wj-flex-chart
      :itemsSource="data"
      bindingX="country"
      header="Country GDP"
      :palette="palette"
    >
      <wj-flex-chart-series binding="2014" name="2014" />
      <wj-flex-chart-series binding="2015" name="2015" />
      <wj-flex-chart-series binding="2016" name="2016" />
      <!-- Legend position -->
      <wj-flex-chart-legend />
    </wj-flex-chart>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  WjFlexChart,
  WjFlexChartSeries,
  WjFlexChartLegend,
} from "@mescius/wijmo.vue3.chart";

// Register components for template usage
// Wijmo Vue wrappers expose components that must be registered in the current scope.
const components = { WjFlexChart, WjFlexChartSeries, WjFlexChartLegend };
Object.entries(components).forEach(
  ([name, cmp]) => /* @ts-ignore */ ((globalThis as any)[name] = cmp)
);

// Data used by the chart and legend
const data = ref([
  { country: "USA", 2014: 17427, 2015: 18036, 2016: 18624 },
  { country: "China", 2014: 10368, 2015: 11016, 2016: 11227 },
  { country: "Japan", 2014: 4601, 2015: 4382, 2016: 4937 },
  { country: "Germany", 2014: 3868, 2015: 3363, 2016: 3466 },
  { country: "UK", 2014: 2948, 2015: 2851, 2016: 2690 },
]);

const palette = ref([
  "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)",
]);
</script>

Your FlexChart should look something like this:

Set the position property of the legend

Wijmo's FlexChart is highly customizable. In Vue, you control the legend position using the wj-flex-chart-legend component’s position prop (or by setting legend.position on the chart instance). Set it to where the legend should appear relative to the plot area. Common values include None, Left, Right, Top, and Bottom. Recent versions also include corner options like TopRight and BottomLeft.

<wj-flex-chart-legend :position="'Bottom'" />

With this property set, your FlexChart will display the legend at the chosen location.

And that's all you have to do! I hope you find this article helpful.

Happy coding!