Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ray Webb
2515
Can the items in a Chart Legend be display side-by-side and the legend centered under the chart?
posted

By default, the legend items for each series are display vertically. Is there a way to list them horizontally and also centered beneath the chart. See attached screenshot for desired layout.

Parents
No Data
Reply
  • 21795
    Verified Answer
    Offline posted

    Hello Ray,

    Yes, you can list the legends’ items horizontally. To do so you should set orientation property of the legend to horizontal like this:

    $("#chartSelector").igDataChart({
 width: "80%",
 height: "300px",
 dataSource: data,
 legend: { 
  element: "legend",
  orientation: "horizontal"
 },
 axes: [
  …
 ],
 series: [
  …
 ]
});

    You can also center the legend under the chart with a little CSS. For example you may put chart and legend in flex container and align them as you need.

    Please check this sample and let me know if this solves your issue or if you have any additional questions on this matter.

Children