horizontalAlign: String

This property lets you align the Legend Position horizontally.


Default: “right”
Example: “left”, “right”, “center”

Notes
  • By combining this with verticalAlign, Legend can be aligned in nine positions on the chart.
Options horizontalAlign verticalAlign
1 “left” “top”
2 “left” “center”
3 “left” “bottom”
4 “center” “top”
5 “center” “center”
6 “center” “bottom”
7 “right” “top”
8 “right” “center”
9 “right” “bottom”


var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 legend :{
 horizontalAlign: "right",
 },

 .
 .
});
chart.render();


Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 3

  1. It is possible – “showInLegend” and “legendText” (like: Number) will be same alignment? Then blue cirlce in “legend” is down form the “legend” text…..

    • ShivaKrishna,

      As of now this feature is not available. As a workaround you can use custom HTML div to show as the way you want. Here is an example with custom Legends in a scrollable div.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.