[Manoj Mohan]

@elanchezhiyan,

In order to show flag on other side, you need to add one dummy stripline with label as unicode “\u2BC6”. Please take a look at the code snippet below to add dummy stripline

function addDummyStripeLine(value, chart) {
  	chart.axisX[0].addTo("stripLines", {
      label : "\u2BC6",
      value: 1935 + chart.axisX[0].convertPixelToValue(chart.axisX[0].stripLines[0].get("labelFontSize") + 5 + chart.axisY[0].bounds.x2) - chart.axisX[0].viewportMinimum,
      color: "transparent",
      labelFontColor: "red"
    })
  }

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elanchezhiyan,

You can position the stripLine label either “inside” or “outside” using labelPlacement property. To add arrow to stripLine label, you can use unicode as shown in the code snippet below

axisX:{
  stripLines:[
    {      
      value:1935,
      label : "\u25B2",
      color: "red",
      labelFontColor: "red"
    }
  ]
}

Also, please check out this JSFiddle for complete code. You can refer to this Wikipedia page for a list of Unicode characters.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@maestrofc27,

In order to add missing dataPoint on each series, you can loop through each dataSeries and find the missing dataPoints and push into respective dataSeries as shown in the code snippet below.

function addMissingDataPoints(chart) {
	var missingValues = [];
  for(var i = 0; i < chart.options.data.length; i++) {
    missingValues[i] = [];
    var dataSeriesToBeChecked = chart.options.data[i];
    for(var j = 0; j < chart.options.data.length; j++) {
      if(j == i) continue;
      var currentDp = chart.options.data[j].dataPoints;
      for(var k = 0; k < currentDp.length; k++) {
        var dp = getPreviousDp(currentDp[k].x, dataSeriesToBeChecked.dataPoints);
        if(dp === true)
          continue;
        missingValues[i].push(dp);
      }
    }
  }

  for(var i = 0; i < chart.options.data.length; i++) {
    for(var j = 0; j < missingValues[i].length; j++) {
      // push the missing values
      chart.options.data[i].dataPoints.push(missingValues[i][j]);
    }
    //sorting the dataPoints so that missing values get adjusted to appropriate place
    chart.options.data[i].dataPoints.sort((a,b) => (a.x < b.x ? -1 : (a.x > b.x ? 1 : 0)))
  }
}

function getPreviousDp(xValue, dps) {
  for(var i=0; i<dps.length; i++) {
    if(dps[i].x == xValue) {
      return true;
    }
    if(dps[i].x > xValue) 
      break;
  }
  return {x: xValue,  y: (i <= 0 ? null : dps[i-1].y)};
}

Please take a look at this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@maestrofc27,

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 CanvasJS

[Manoj Mohan]

@mingscc,

You can set the minimum of axisX to the initial dataPoint x value in order to make x-axis start from the dataPoint onwards. Please take a look at this JSFiddle for an example on the same.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@sandeep-sharma2,

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]

@begins,

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

[Manoj Mohan]

@sandeep-sharma2,

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

[Manoj Mohan]

@sandeep-sharma2,

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

[Manoj Mohan]

@sandeep-sharma2,

The images shared above seems to be broken. Can you kindly upload the images to imgur and share it with us so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@sandeep-sharma2,

The image shared above seems to be broken. Can you kindly upload the image to imgur and share it with us so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Tony,

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 CanvasJS

[Manoj Mohan]

@tgriffiths,

Can you kindly create a sample project reproducing the issue you are facing along with sample data and share it with us over Google-Drive and 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]

@rlong,

We have just released v3.4.6 with the bug fix related to incorrect value parameter in labelFormatter of crosshair when snapToDataPoint for y-axis is set to true. Please check out 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]

@rlong,

Thanks for reporting the use-case. There seems to be an issue with value parameter in labelFormatter of crosshair when snapToDataPoint for y-axis is set to true. We will fix it in our future releases.

—-
Manoj Mohan
Team CanvasJS