Chart.js add direction arrows to the X and Y axes

user_14878901 0
Viewed 366

I'm trying to add/draw arrows to the axis of my charts. (So they can look a bit more like that)

I've tried to look into the doc, but I didn't find any options concerning in the scales part. I tried to do it by using the annotation plugins, but it fall short as on a bar scheme the arrow seems limited on the x axis, and I didn't find a way for it to overflow.

I found a person having a similar problem, but it is on an older version of the library

Do I need to do a custom scales class ?

Here is my current test implementation

const data = {
  labels: ["Label1","Label2","Label3","Label4"],
  datasets: [{
    label: 'First Dataset',
    data: [1349,282,274,173],
    backgroundColor: ["blue"],
  }]
};
const annotation1 = {
    type: 'line',
    borderColor: "red",
    borderWidth: 3,
    arrowHeads: {
        end: {
            enabled: true,
            // borderColor: 'green'
        }
    },
    scaleID: 'y',
    value: 0

};
const annotation2 = {
    type: 'line',
    borderColor: "red",
    borderWidth: 3,
    arrowHeads: {
        end: {
            enabled: true,
        }
    },
    xMax: 0,
    xMin: 0,
    xScaleID: 'x',
    yMax: 1500,
    yMin: 0,
    yScaleID: 'y'
};
const ctx= document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        padding: 10,
        scales: {
            x: {
                grid: {
                    display: false,
                    borderColor:  "red",
                    borderWidth: 3,
                    z:4,
                },
                grace: '10%'
            },
            y: {
                grid: {
                    display: false,
                    borderColor:  "red",
                    borderWidth: 3,
                    padding: 100,

                },
                ticks: {
                    display: false,
                    padding: 100,
                },
                grace: '10%',
                padding: 100,
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                enabled: false,
            },
            datalabels: {
                labels: {
                    value: {
                        align: 'end',
                        anchor: 'end',
                        color: "black",
                        formatter: function (value, ctx) {
                            return value;
                        },

                    },
                }
            },
            annotation: {
                drawTime: 'beforeDraw',
                annotations: {
                    annotation1,
                    annotation2
                }
            },
        }
    },
    plugins: [ChartDataLabels],
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>

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

chart.js charts javascript
1 Answers

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.

user_148789010
Related