[Vishwas R]

@tilakbhanugmail-com,

To create a chart with draggable dataPoints you can attach event handlers to div with id "canvasjs-react-chart-container-0" in React so as to perform necessary actions when user clicks or drags inside the div as shown in the code snippet below:

$("#canvasjs-react-chart-container-0 > .canvasjs-chart-container").on({
  mousedown: function(e) {
    _this.mouseDown = true;
    _this.getPosition(e);  
    _this.searchDataPoint();
  },
  mousemove: function(e) {
    _this.getPosition(e);
    if(_this.mouseDown) {
      clearTimeout(_this.timerId);
      _this.timerId = setTimeout(function(){
        if(_this.selected != null) {
          chart.data[0].dataPoints[_this.selected].y = _this.yValue;
          chart.render();
        }   
      }, 0);
    }
    else {
      _this.searchDataPoint();
      if(_this.changeCursor) {
        chart.data[0].set("cursor", "n-resize");
      } else {
        chart.data[0].set("cursor", "default");
      }
    }
  },
  mouseup: function(e) {
    if(_this.selected != null) {
      chart.data[0].dataPoints[_this.selected].y = _this.yValue;
      chart.render();
      _this.mouseDown = false;
    }
  }
});

Please take a look at this Sample Project for a working example with sample code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@yansonalvin97,

based on the JSON that you have shared, passing name as label and age as y-value should work fine. Below is the code snippet.

function parseData(jsonData){
	for(var i = 0; i < jsonData.length; i++) {
		dataPoints.push({ label: jsonData[i].name, y: Number(jsonData[i].age)});
	}
}

Please take a look at this updated sample project for working code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@yansonalvin97,

Parsing the dataPoints to the format accepted by CanvasJS before passing it to chart-options should work fine in this case.

for (var i = 0; i <= result.length - 1; i++) {
  dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
}

Please take a look at this JSFiddle for rendering chart from JSON object.

If you are still facing issue, kindly share sample project along with sample JSON over Google-Drive or Onedrive, so that we can look into it and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@johannsmithr,

One of our tech representative will contact you over email with appropriate solution.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@yansonalvin97,

CanvasJS Charts & StockCharts works with all versions of Angular / AngularJS including Angular 6. Below are the steps to integrate CanvasJS Chart / StockChart in your angular app.
1. Save canvasjs.min.js (canvasjs.stock.min.js incase of StockChart) within source-folder of your Angular application ( src or src/assets or src/lib )
2. Import the library into your app.
For Chart: import * as CanvasJS from './canvasjs.min';
For StockChart: import * as CanvasJS from './canvasjs.stock.min';

Please check out Angular Gallery for examples on integrating charts in Angular app.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@gautamtata,

You can publish Google-Sheet as csv and use the url generated to fetch data using jQuery AJAX as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bajlo,

We recommend you to use the latest version of CanvasJS as we keep our library updated in sync with browsers update and also improve the library by adding new features.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@snehal,

Please take a look at this sample project for creating dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page on creating a Live Updating Charts from JSON API & AJAX.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Michael,

You can hide all the legends based on chart height or window width by setting showInLegend to false for smaller screen devices as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bajlo,

It seems to be working fine with salesforce lightning component. Error could be because of missing jquery when using jquery.canvasjs.min.js or of some other library added in the project. I tried creating charts in salesforce lightning component with canvasjs.min.js and jquery.canvasjs.min.js separately and it seems to be working fine. Please take a look at this Github Repo for the working code that was used in creating the component with jquery.canvasjs.min.js.

If you are still facing the issue, kindly share the complete code over Gist / Google-Drive / Onedrive so that we can try running it at our end, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@abdul8423,

CanvasJS library just renders chart with dataPoints provided by you and it don’t modify the dataPoints that you have passed. To add missing dates, you can parse through dataPoints array and add missing dates to it before rendering the chart as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hassanmoin21,

Please take a look at this JSFiddle – which is already mentioned in the previous reply-post.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@haunguyen,

You can apply for Non-Commercial version of CanvasJS here. Please refer FAQ for more info and contact sales@canvasjs.com for further sales related queries.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jamesrus52,

Chart elements looks blur when either zoom within display setting of windows or browser is changed. Resetting zoom to 100% should work fine.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jamesrus52,

It seems to be proper and not blur across browsers including Chrome, Firefox, Opera, Edge, IE11.

Can you kindly share your OS, Browser(browser name and its version) details so that we can try at our end and fix the issue, if any?

—
Vishwas R
Team CanvasJS