Create an arrow on chart

[celtas6655]

Hi there, I want to add an arrow on my chart, or on the Y axis and force it to change to point up or down whether my value on chart is bigger than target or smaller.

Kind regards,
Michal

[Indranil]

@celtas6655,

Can you please provide a pictorial representation, so that we can understand your requirement better.

__________
Indranil Deo,
Team CanvasJS

[celtas6655]

Hi, here’s a sample of what I would love to see on my chart.
https://imgur.com/a/NvhzA
Those charts are already generated, I just want to have this arrow on the middle, which will point up if my percentage is lower than the golden dotted line, and point down if values are higher than already mentioned golden dotted line.

Kind regards

• This reply was modified 7 years, 2 months ago by celtas6655.

[Indranil]

@celtas6655,

You can draw arrow on chart based on threshold by writing few lines of code. Please refer below code snippet for the same.

function renderArrow(chart) {
  for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
    if (chart.data[0].dataPoints[i].enableArrow) {
      var axisBounds = chart.axisX[0].get("bounds");
      var x1, x2, y1, y2;
      var threshold = chart.axisY[0].stripLines[0].value;

      x1 = x2 = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x);
      y1 = axisBounds.y1;
      y2 = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[i].y);

      chart.ctx.strokeStyle = "#FF0000";
      chart.ctx.moveTo(x1, y1);
      chart.ctx.lineTo(x2, y2);
      chart.ctx.stroke();

      if (chart.data[0].dataPoints[i].y < threshold) {
        chart.ctx.moveTo(x2, y2);
        chart.ctx.lineTo(x2 + 10, y2 + 10);
        chart.ctx.moveTo(x2, y2);
        chart.ctx.lineTo(x2 - 10, y2 + 10);
        chart.ctx.stroke();
      } else {
        chart.ctx.moveTo(x1, y1);
        chart.ctx.lineTo(x1 + 10, y1 - 10);
        chart.ctx.moveTo(x1, y1);
        chart.ctx.lineTo(x1 - 10, y1 - 10);
        chart.ctx.stroke();
      }
    }
  }
}
renderArrow(chart);

Also, please check out this JSFiddle for complete working example.

___________
Indranil Deo
Team CanvasJS

[celtas6655]

Thank you so much for the reply, that’s exactly what I want, but I can’t get it to work with my chart generated with the use of PHP from excel file.
Here’s the code in JSFiddle, the chart worked before I added the code with pointing arrow, but I placed there the whole code
https://jsfiddle.net/hsywdwqn/

[Indranil]

@celtas6655,

Please create a sample project reproducing the issue along with sample data, so that we can understand it better and help you out.

__________
Indranil Deo,
Team CanvasJS