Chart Area Border

Chart Area Border - 图1

config plugin data

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. chartAreaBorder: {
  7. borderColor: 'red',
  8. borderWidth: 2,
  9. borderDash: [5, 5],
  10. borderDashOffset: 2,
  11. }
  12. }
  13. },
  14. plugins: [chartAreaBorder]
  15. };
  1. const chartAreaBorder = {
  2. id: 'chartAreaBorder',
  3. beforeDraw(chart, args, options) {
  4. const {ctx, chartArea: {left, top, width, height}} = chart;
  5. ctx.save();
  6. ctx.strokeStyle = options.borderColor;
  7. ctx.lineWidth = options.borderWidth;
  8. ctx.setLineDash(options.borderDash || []);
  9. ctx.lineDashOffset = options.borderDashOffset;
  10. ctx.strokeRect(left, top, width, height);
  11. ctx.restore();
  12. }
  13. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const labels = Utils.months({count: 7});
  4. const data = {
  5. labels: labels,
  6. datasets: [
  7. {
  8. label: 'Dataset 1',
  9. data: Utils.numbers(NUMBER_CFG),
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12. },
  13. {
  14. label: 'Dataset 2',
  15. data: Utils.numbers(NUMBER_CFG),
  16. borderColor: Utils.CHART_COLORS.blue,
  17. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  18. }
  19. ]
  20. };

Docs