[Manoj Mohan]

@gowri-d,

You 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 CanvasJS

[Manoj Mohan]

@gowri-d,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or OneDrive so that we can look into the code, run it locally at our end to understand the scenario better and help you out?

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@pankaj0086,

Sorry for the inconvenience caused. As iOS has dropped the canvas memory buffer to 224MB, we have tried to optimize memory consumption of our library. Also, we will optimize it further in our future releases.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@shivan,

We have just released v1.4.3 with this bug fix. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elanchezhiyan,

You can set the interval for axisX to overcome the issue of getting repeated values in x-axis.

If you are still facing the issue, can you kindly create JSFiddle reproducing the issue and share it with us so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@agaur,

CanvasJS library is based on JavaScript and hence it inherits all its behaviour and limitations. However, we will reconsider the behaviour of handling large numbers for improvement in our future releases.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@agaur,

The number you are passing to y-value seems to be greater than JavaScript Number.MAX_SAFE_INTEGER, because of which axis labels are not rendered properly.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elanchezhiyan,

Previously 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 CanvasJS

[Manoj Mohan]

@aisolutions,

You 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].dataPoints object. 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 CanvasJS

[Manoj Mohan]

@elanchezhiyan,

You 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

[Manoj Mohan]

@canvy,

I need to be able to get a charts.axisY2[0].bounds property calculated BEFORE I render it. How can I do that?

Sorry, it’s not possible to access bounds of the axis before rendering the chart. However after rendering it once, you get access to all the properties. Please refer to the Methods & Properties documentation for more info.

how can I use offscreenCanvas with my chart too?

offscreenCanvas is not supported in CanvasJS as of now.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@tjcrowder,

Sorry, there is no official TypeScript type definition for CanvasJS as of now. However, this feature is there in our roadmap but no definite timeline yet as we are working on some other important features at this point in time.

You really shouldn’t include node_modules in zips like that.

Thanks for the suggestion. We have provided node_modules for the ease of the user to run the sample.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@aisolutions,

To display a chart inside tooltip, you can create a DOM required for the chart within tooltip using contentFormatter and render the chart on updated event of toolTip. Please take a look at this below code snippet for the same.

toolTip: {
      updated: function(e) {
        typeof pieChart.destroy === "function" && pieChart.destroy();  
        pieChart = new CanvasJS.Chart('pie-chart', chartOptions[e.entries[0].dataPoint.label]);
        pieChart.render(); 
      },
      contentFormatter: function() {
        return "<div id='pie-chart' style='width:200px; height:200px;'></div>";
      },
}

Also, check out this JSFiddle for complete sample code for rendering the chart within tooltip.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@m-usman,

Yes, you can use datetime in x-axis. In order to use datetime in x-axis, you need to first convert PHP date to timestamp using strtotime and then convert PHP timestamp to JavaScript timestamp by multiplying it with 1000.

$phpDate = date("Y-m-d h:i:sa");
$phpTimestamp = strtotime($phpDate);
$javaScriptTimestamp = $phpTimestamp * 1000;

You can refer to this thread for more information on using datetime on x-axis in PHP. Also, you can check out this gallery page for an example on using JavaScript timestamp in x-axis in PHP.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anton001,

One of our sales representative will get in touch with you over email. For any license related query, please contact sales@canvasjs.com.

—-
Manoj Mohan
Team CanvasJS