Forum Replies Created by Manoj Mohan
-
You can loop through datapoints and add the missing datapoint before rendering the chart. Please find the code-snippet below.
for(i=0; i<chart.options.data.length; i++) { var dps = chart.options.data[i].dataPoints; for(var j = 1; j < dps.length; j++) { if(dps[j].x > (j+1)) dps.splice(j, 0, {x: j+1, y: dps[j-1].y}); } }Also, check out this JSFiddle for complete working sample.
—-
Manoj Mohan
Team CanvasJSIn order to display y values of all the dataSeries in a toolTip, you can loop through each of the e.entries and display the respective y values in appropriate format. Please check out the below code snippet.
contentFormatter: function (e) { var content = ""; content += e.entries[0].dataPoint.x + "<br/>" for(var i=0; i<e.entries.length; i++) { content += "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: " + CanvasJS.formatDate(e.entries[i].dataPoint.y,"hh:mm:ss TT") + " <br/>"; //Formatting dateTime in ToolTip } return content; }Also, take a look at this JSFiddle for complete code.
—-
Manoj Mohan
Team CanvasJSYou can highlight the dataPoint without toolTip on hovering over dataPoint by setting the toolTipContent for the dataSeries to null. Please take a look at this StackBlitz example for highlighting dataPoint on hovering over another chart.
—-
Manoj Mohan
Team CanvasJSYou can hide and unhide the axis gridlines by setting axis gridThickness to 0 and positive value respectively as shown in the below code snippet.
toggleGridLines() { for(var i = 0; i < this.charts.length; i++) { for(var j = 0; j < this.charts[i].axisY.length; j++) { this.charts[i].axisY[j].set("gridThickness", (this.charts[i].axisY[j].gridThickness ^ 1)) } } }Also, check out this StackBlitz example for hide/unhide axis gridlines on click of a button.
—-
Manoj Mohan
Team CanvasJSTony,
It seems like the response that you are getting from the AJAX call is of type string instead of JSON. Parsing the response before passing to dataPoints should work fine in your case. Please take a look at this sample project for an example on rendering CanvasJS chart in ASP.NET Core Razor Page Application.
—-
Manoj Mohan
Team CanvasJSWhat I would like to do is automatically display the crosshairs wherever the cursor is after the chart has been rendered without requiring the cursor to move first. Is there any way I can do this?
You can display the crosshairs at the last cursor position after rendering the chart by storing the last cursor position with respective to x and y axis in mousemove event callback function. After the chart render method is called, you can display the crosshair at last cursor position using showAt method. Please take a look at this below code snippet for the same.
setInterval(() => { chart.render(); //Check if crosshair positions is within plot area if( chart.axisX[0].bounds.x1 <= crossHairPositionX && chart.axisX[0].bounds.x2 >= crossHairPositionX && chart.axisY[0].bounds.y1 <= crossHairPositionY && chart.axisY[0].bounds.y2 >= crossHairPositionY) { if(crossHairPositionX != null && crossHairPositionY != null) { chart.axisX[0].crosshair.showAt(chart.axisX[0].convertPixelToValue(crossHairPositionX)); chart.axisY[0].crosshair.showAt(chart.axisY[0].convertPixelToValue(crossHairPositionY)); } } }, 1000); $(".canvasjs-chart-canvas").last().on("mousemove", function(e) { var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; crossHairPositionX = relX; var relY = e.pageY - parentOffset.top; crossHairPositionY = relY; });Also check out this updated JSFiddle for complete working code.
The last note is that for whatever reason, the showAt method does not seem to work for the Y2 axis at all. I don’t understand why but if you look at this jsfiddle, which is the same in every way from the one above except I’m using the Y2 axis, you’ll see that the crosshair will not display for the Y2 axis using the showAt method
Thanks for reporting the use-case. It seems like a bug & we will fix it in our upcoming versions.
—-
Manoj Mohan
Team CanvasJS
