Forum Replies Created by Manoj Mohan
-
What 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 CanvasJSYou can use react-modal module to generate modal and bind the click event in dataPoint to open modal as shown in the below code snippet.
openModal(e) { this.setState({showModal: true, x: e.dataPoint.x, y: e.dataPoint.y}); } . . . const options = { data: [ { //Change type to "line", "bar", "area", "pie", etc. type: "column", click: this.openModal, dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] } ] }, . . . <Modal isOpen={this.state.showModal} contentLabel="Modal" style={customStyles} > . .Please checkout this StackBlitz project for an example on the same.
——
Manoj Mohan
Team CanvasJSPreviously shared code seems to work fine with positive values. The logic can be improved to make it work with negative values as shown in the below code-snippet
function getSubscriptString(value) { var subscriptValue = Math.ceil(Math.log(value)/Math.log(10)); //Handling double digit numbers if(subscriptValue > 9 || subscriptValue < -9) { return (subscriptValue < -9 ? "\u207B" : "") + (Math.abs(subscriptValue)+"").split('').reduce( function(prevVal,val) { return prevVal + unicodeStringForSubscript[val]; }, "") } return (subscriptValue < 0 ? "\u207B": "") + unicodeStringForSubscript[Math.abs(subscriptValue)]; } .. axisX:{ title: "Logarithmic Axis", logarithmic: true, logarithmBase: 10, labelFormatter: function(e) { return 10 + getSubscriptString(e.value); } } ..Also, check out this JSFiddle for complete working sample.
—-
Manoj Mohan
Team CanvasJSYou can pass the pie1, pie2,… values to respective dataPoints of the scatter chart and on displaying the tooltip, you can get the values for pie chart using
e.entries[0].dataPointsobject. Please take a look at the code snippet below for the same.. . toolTip: { updated: function(e) { typeof pieChart.destroy === "function" && pieChart.destroy(); pieChart = new CanvasJS.Chart('pie-chart', chartOptions); pieChart.options.title.text = e.entries[0].dataPoint.name; pieChart.options.data[0].dataPoints = []; pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie1}); pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie2}); pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie3}); pieChart.render(); }, contentFormatter: function() { return "<div id='pie-chart' style='width:200px; height:200px;'></div>"; }, hidden: function() { typeof pieChart.destroy === "function" && pieChart.destroy(); } } . . dataPoints: [ { y: 219960, name: "First", pie1: 20, pie2: 30, pie3: 50}, { y: 363040, name: "Second", pie1: 60, pie2: 20, pie3: 40} ] . .Please take a look at this JSFiddle for complete working code.
—-
Manoj Mohan
Team CanvasJSYou can use unicode characters in labelFormatter to display power (subscript) values in the axis labels. Please check out the code snippet for the same.
var unicodeStringForSubscript = ["\u2070", "\u00B9", "\u00B2", "\u00B3", "\u2074", "\u2075", "\u2076", "\u2077", "\u2078", "\u2079"] . . axisX:{ title: "Logarithmic Axis", logarithmic: true, logarithmBase: 10, labelFormatter: function(e) { return 10 + unicodeStringForSubscript[Math.ceil(Math.log(e.value)/Math.log(10))] ; } . .Also, take a look at this JSFiddle for a complete working code.
—-
Manoj Mohan
Team CanvasJS
