Alignment and Title Position

This sample show how to configure the alignment and title position of the chart legend.

Alignment and Title Position - 图1

Title Position: startTitle Position: center (default)Title Position: end

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. legend: {
  7. title: {
  8. display: true,
  9. text: 'Legend Title',
  10. }
  11. }
  12. }
  13. }
  14. };
  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: 'Title Position: start',
  4. handler(chart) {
  5. chart.options.plugins.legend.align = 'start';
  6. chart.options.plugins.legend.title.position = 'start';
  7. chart.update();
  8. }
  9. },
  10. {
  11. name: 'Title Position: center (default)',
  12. handler(chart) {
  13. chart.options.plugins.legend.align = 'center';
  14. chart.options.plugins.legend.title.position = 'center';
  15. chart.update();
  16. }
  17. },
  18. {
  19. name: 'Title Position: end',
  20. handler(chart) {
  21. chart.options.plugins.legend.align = 'end';
  22. chart.options.plugins.legend.title.position = 'end';
  23. chart.update();
  24. }
  25. },
  26. ];