Create an arrow on chart

• September 14, 2017 at 6:42 pm #16047
  
  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

  September 15, 2017 at 10:35 am #16052
  
  Indranil

  @celtas6655,

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

  __________
  Indranil Deo,
  Team CanvasJS

  September 15, 2017 at 1:15 pm #16054
  
  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.
  September 18, 2017 at 11:20 am #16071
  
  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

  September 26, 2017 at 4:16 pm #16142
  
  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/

  October 3, 2017 at 10:21 am #17212
  
  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