Changing the FlexChart Legend Position in React

October 14 2025

Background:

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

Steps to Complete:

Initialize your FlexChart and bind data to the legend
Set the position property of the legend

Getting Started:

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

Initialize your FlexChart and bind data to the legend

To customize the legend position in React, render a FlexChart and bind it to data in your component. Set itemsSource, bindingX, and define FlexChartSeries entries. This data drives what appears in the legend.

import React from "react";
import {
  FlexChart,
  FlexChartSeries,
  FlexChartLegend,
} from "@mescius/wijmo.react.chart";

type CountryGdp = {
  country: string,
  2014: number,
  2015: number,
  2016: number,
};

const data: CountryGdp[] = [
  { 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: string[] = [
  "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)",
];

export default function App(): JSX.Element {
  return (
    <div style={{ padding: 16 }}>
      <FlexChart
        itemsSource={data}
        bindingX="country"
        header="Country GDP"
        palette={palette}
      >
        <FlexChartSeries binding="2014" name="2014" />
        <FlexChartSeries binding="2015" name="2015" />
        <FlexChartSeries binding="2016" name="2016" />
      </FlexChart>
    </div>
  );
}

Your FlexChart should look something like this:

FlexChart Legend Right

Set the position property of the legend

Wijmo's FlexChart is highly customizable. In React, you control the legend position using the FlexChartLegend component’s position prop (or by setting legend.position on the chart props). 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.