You must be logged in to post your query.
Home › Forums › Chart Support › Create an arrow on chart
Tagged: arrow, auto, chart, Column
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
@celtas6655,
Can you please provide a pictorial representation, so that we can understand your requirement better.
__________ Indranil Deo, Team CanvasJS
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
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
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/
Please create a sample project reproducing the issue along with sample data, so that we can understand it better and help you out.
You must be logged in to reply to this topic. Login/Register