Position

This sample show how to change the position of the chart legend.

Position - 图1

Position: top Position: right Position: bottom Position: left

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const data = {
  4. labels: Utils.months({count: DATA_COUNT}),
  5. datasets: [
  6. {
  7. label: 'Dataset 1',
  8. data: Utils.numbers(NUMBER_CFG),
  9. fill: false,
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12. },
  13. ]
  14. };
  1. const actions = [
  2. {
  3. name: 'Position: top',
  4. handler(chart) {
  5. chart.options.plugins.legend.position = 'top';
  6. chart.update();
  7. }
  8. },
  9. {
  10. name: 'Position: right',
  11. handler(chart) {
  12. chart.options.plugins.legend.position = 'right';
  13. chart.update();
  14. }
  15. },
  16. {
  17. name: 'Position: bottom',
  18. handler(chart) {
  19. chart.options.plugins.legend.position = 'bottom';
  20. chart.update();
  21. }
  22. },
  23. {
  24. name: 'Position: left',
  25. handler(chart) {
  26. chart.options.plugins.legend.position = 'left';
  27. chart.update();
  28. }
  29. },
  30. ];