[Vishwas R]

@wemba,

Primary y-axes are drawn to the left and secondary to the right of the chart (incase of line, column, area charts). To have both the axes towards left of the chart, you will have to define multiple primary y-axis (Please refer code-snippet below) and assign dataSeries to them by setting axisYIndex. Please refer documentation for more info.

axisY: [{
      title: "Weight(kg)",
      suffix: "kg",
      lineColor: "#84A7D1",
      lineThickness: 5,
      interval: 1,
      intervalType: "number",
      includeZero: true,
      viewportMinimum: 0,
      viewportMaximum: 12
    },{
      title: "Height (cm)",
      suffix: "cm",
      lineColor: "#C24642",
      lineThickness: 5,
      interval: 5,
      minimum: 10,
      intervalType: "number",
      includeZero: false,
      viewportMinimum: 10,
      viewportMaximum: 80
 }]

In order to help us in understanding the issue, please follow below guideline:

Have a reproducible demo of your chart.

This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements.

Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@joice_circuitects,

Glad that you were able to get it worked :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

Samyukta,

You can see 2018 and 2020 in axisX due to the auto-calculated minimum and maximum. You can customize it to show only 2019 data by setting minimum and maximum properties as shown in this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Samyukta,

The issue seems to be in parsing the JSON. Parsing JSON properly should work fine in your case. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@vijenderreddy,

rangeChanging seems to be working fine, please take a look at this JSFiddle. Also refer documentation on rangeChaging for more information and live example.

If you are still facing issue, kindly create a JSFiddle reproducing the issue and share it with us so that we can run it locally at our end to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@Samyukta,

Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Samyukta,

The issue seems to be with the approach of looping through ‘Values’ object. Please take a look at this stackoverflow thread for more information on looping through the properties of a JavaScript object.

If this doesn’t help you fulfill your requirements, kindly brief us more about your requirements so that we can understand it better and help you achieve the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Samyukta,

In the JSFiddle that you have shared, the issue seems to be with the approach of looping through ‘Values’ object. Iterating through Values object properly seems to be working fine.

for (var key in Values) {
    if (Values.hasOwnProperty(key)) {
        console.log(key + " -> " + Values[key]);
    }
}

Please refer to this stackoverflow thread for more information on iterating through the properties of a JavaScript object.

If you are still facing issue, kindly brief us more about it so that we can understand it better and help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@wemba,

Please take a look at this documentation page for tutorial and live example on Multiple Y axes.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@karthi191194,

Chart elements may look blur when either zoom within display setting of browser or windows is changed. Resetting zoom to 100% should work fine in this case. Also the look & feel of title, label and other text elements depends on font-family being used. You can try customizing the font-family of text by setting the fontFamily property.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fcbman,

The issue seems to be with x-value that you are passing, please refer this stackoverflow thread for more info. Can you try passing time-stamp instead of date and see if it works?

If the issue still persists. kindly share sample project along with sample data over Google-Drive or Onedrive so that we can run it locally at our end to debug and help you resolve the issue.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@wilmadsouza,

You can customize the color of dataPoint by setting color property. Please take a look at this JSFiddle for an example showing changing the color of line based on the dataPoint value.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Christian,

You can check if the triggered event is zoom/pan or reset by checking e.trigger within rangeChanged handler. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ayanghatak,

Thanks for your suggestion, we will reconsider this behavior for future releases.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nickneyland,

You can show last few set of dataPoints with the help of shift method. Please take a look at this documentation page for step to step tutorial on creating Dynamic Charts.

I would suggest you to store CSV in date-time,value format. Please take a look at this updated JSFiddle for an example with Jun 10 2019 00:00:03 EST,422 format.

—
Vishwas R
Team CanvasJS