[Chartjs]-Chart.js add direction arrows to the X and Y axes

by

2👍

✅

Ok, I did find a way to do it, by using some of the content of this video.

Here, when I retake my last example, and adding a plugin "customBorder"

const data = {
  labels: ["Label1", "Label2", "Label3", "Label4"],
  datasets: [{
    label: 'First Dataset',
    data: [1349, 282, 274, 173],
    backgroundColor: ["blue"],
  }]
};
const customBorder = {
  id: 'customBorder',
  afterDatasetsDraw(chart, args, pluginOptions) {
    const {
      ctx,
      chartArea: {
        top,
        bottom,
        left,
        right,
        width,
        height
      }
    } = chart;


    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.strokeStyle = "red";

    ctx.moveTo(left - 1, top + 3);
    ctx.lineTo(left + 5, top + 10);
    ctx.moveTo(left + 1, top + 3);
    ctx.lineTo(left - 5, top + 10);
    ctx.moveTo(left, top + 5);
    ctx.lineTo(left, bottom);
    ctx.lineTo(right - 5, bottom);
    ctx.moveTo(right - 3, bottom + 1)
    ctx.lineTo(right - 10, bottom - 5);
    ctx.moveTo(right - 3, bottom - 1);
    ctx.lineTo(right - 10, bottom + 5);
    ctx.stroke();
    ctx.closePath();
  }
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      x: {
        grid: {
          drawBorder: false,
          display: false,
        },
        grace: '15%'
      },
      y: {
        grid: {
          drawBorder: false,
          display: false,
        },
        ticks: {
          display: false,
        },
        grace: '15%',
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
      datalabels: {
        labels: {
          value: {
            align: 'end',
            anchor: 'end',
            color: "black",
            formatter: function(value, ctx) {
              return value;
            },

          },
        }
      },
    }
  },
  plugins: [ChartDataLabels, customBorder],
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
</script>

<canvas id="myChart"></canvas>

I don’t think it is the best way to do it, but it works.

Leave a comment