[Chartjs]-ChartJS customize left and bottom axe border

by

2👍

✅

You can instead of drawing a rectangle at once just draw every line seperatly:

const plugin = {
  id: 'chartAreaBorder',
  afterDraw: (chart, args, opts) => {
    const {
      chartArea: {
        top,
        left,
        width,
        height
      },
      ctx
    } = chart;
    const {
      borders: {
        tLtR,
        tLbL,
        tRbR,
        bLbR
      }
    } = opts;

    ctx.save();

    if (tLtR && tLtR.borderWidth !== 0) {
      ctx.beginPath();
      ctx.strokeStyle = tLtR.borderColor || Chart.defaults.color;
      ctx.lineWidth = tLtR.borderWidth || 0;
      ctx.borderStyle = tLtR.borderDash || [];
      ctx.borderTopWidth = tLtR.borderTopWidth || 0;
      ctx.setLineDash(tLtR.borderDash || []);
      ctx.lineDashOffset = tLtR.borderDashOffset || 0;
      ctx.moveTo(left, top);
      ctx.lineTo(left + width, top)
      ctx.stroke();
    }

    if (tLbL && tLbL.borderWidth !== 0) {
      ctx.beginPath();
      ctx.strokeStyle = tLbL.borderColor || Chart.defaults.color;
      ctx.lineWidth = tLbL.borderWidth || 0;
      ctx.borderStyle = tLbL.borderDash || [];
      ctx.borderTopWidth = tLbL.borderTopWidth || 0;
      ctx.setLineDash(tLbL.borderDash || []);
      ctx.lineDashOffset = tLbL.borderDashOffset || 0;
      ctx.moveTo(left, top);
      ctx.lineTo(left, top + height)
      ctx.stroke();
    }

    if (tRbR && tRbR.borderWidth !== 0) {
      ctx.beginPath();
      ctx.strokeStyle = tRbR.borderColor || Chart.defaults.color;
      ctx.lineWidth = tRbR.borderWidth || 0;
      ctx.borderStyle = tRbR.borderDash || [];
      ctx.borderTopWidth = tRbR.borderTopWidth || 0;
      ctx.setLineDash(tLbL.borderDash || []);
      ctx.lineDashOffset = tRbR.borderDashOffset || 0;
      ctx.moveTo(left + width, top);
      ctx.lineTo(left + width, top + height)
      ctx.stroke();
    }

    if (bLbR && bLbR.borderWidth !== 0) {
      ctx.beginPath();
      ctx.strokeStyle = bLbR.borderColor || Chart.defaults.color;
      ctx.lineWidth = bLbR.borderWidth || 0;
      ctx.borderStyle = bLbR.borderDash || [];
      ctx.borderTopWidth = bLbR.borderTopWidth || 0;
      ctx.setLineDash(bLbR.borderDash || []);
      ctx.lineDashOffset = bLbR.borderDashOffset || 0;
      ctx.moveTo(left, top + height);
      ctx.lineTo(left + width, top + height)
      ctx.stroke();
    }

    ctx.restore();
  }
}

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      chartAreaBorder: {
        borders: {
          tLtR: {
            borderWidth: 0,
          },
          tLbL: {},
          tRbR: {
            borderTopWidth: 2,
            borderColor: 'red',
            lineDashOffset: 5,
            borderDash: [2, 2]
          },
          bLbR: {
            borderDash: [2, 2]
          },
        }
      }
    }
  },
  plugins: [plugin]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Leave a comment