[Manoj Mohan]

@mustadirmahmood,

You can get access to stockchart object from event parameter of tooltip’s updated event as e.chart.stockChart. Please take a look at the code snippet below to show the tooltip across charts in stockchart based on nearest x value.

function showTooltip(e) {
  var stockChart = e.chart.stockChart;
  var charts = stockChart.charts;

  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart) {
      charts[i].toolTip.showAtX(getNearestXValues(e.entries[0].xValue, charts[i].data[0].dataPoints));
    }
  }
}

function hideTooltip(e) {
  var stockChart = e.chart.stockChart;
  var charts = stockChart.charts;

  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart)
      charts[i].toolTip.hide();
  }
}

Also, check out this updated JSFiddle for the complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anirudhspriyan,

Are you looking to add border radius to chart container? If yes, you can add it through CSS as shown in the code-snippet below.

.canvasjs-chart-canvas {
  border-radius: 12px;
}

#chartContainer {
  border: 1px solid #dedede;
  border-radius: 12px;
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@neha,

You can create a chart with 3 y-axes for Current, Voltage, and Temperature and use the axisYIndex property to assign each dataseries to a particular y-axis.

Please check this StackBlitz for a working example on the same.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@m-usman,

Chart height seems to be working fine on initial render. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rafdu01,

To display numbers after decimal point in the axis labels, you can use valueFormatString. Also, if you are looking to format the values in the tooltip, you can use yValueFormatString.

If you are still facing the issue, can you kindly share the pictorial representation of your requirement so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rafdu01,

Can you kindly brief us more about your requirements, the format in which you would like to show the labels (9.0, 9.2, 9.4,…, 10 or 9, 10, 11,…) so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rafdu01,

You can set valueFormatString: "#0.0" to show 1 decimal value in the axis labels. Please refer to our documentation page for more customization options available.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mustadirmahmood,

The tooltip of the charts within StockChart are synced based on x-values by default. In order to sync tooltip based on nearest x-values, you can find the nearest x-values and show tooltip on the other charts using showAt method of toolTip. Please take a look at the code snippet below.

function getNearestXValues(xVal, dps1) {

  return [].concat(dps1).sort(function(a, b) {
    var diffA = Math.abs(xVal - a.x);
    var diffB = Math.abs(xVal - b.x);
    return diffA - diffB; // sort a before b when the distance is smaller
  })[0].x;

}

function showTooltip(e) {
  for( var i = 0; i < stockChart.charts.length; i++){
    if(stockChart.charts[i] != e.chart) {
      stockChart.charts[i].toolTip.showAtX(getNearestXValues(e.entries[0].xValue, stockChart.charts[i].data[0].dataPoints));
    }

  }
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

It seem to be working fine, attaching screenshot for your reference.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

Since you are passing border width as 1.5px for the rows, there is some round off issue which results in misalignment with chart gridlines. Passing integer value to border-width and height to row seems to align properly with chart gridlines.

.row-with-border {
  border: 1px solid #ccc;
  height: 22px;
}

.row-with-border:last-child {
  border-bottom-width: 1px;
  height: 23px;
}

Also, check out this updated sample project for complete working code.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

The project shared above seems to have some issue with dependency package when we tried to run at our end. Can you kindly create sample project along with the node_modules and share it with us over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@darshanjain,

Indexlabels are shown even when the datapoint range are partially outside the viewport region in case of range bar charts and it seems to be working fine.

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

Indexlabels are rendered on top of stripline by default. However, when showOnTop property of stripline is set to true, stripline gets rendered on top of every other element including indexlabel. In order to view the indexlabel clearly in your scenario, you can set the indexLabelBackgroundColor to the chart background color. Please take a look at this JSFiddle for an example on the same.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@arshad,

Glad that you we able to figure it out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@arshad,

The code shared above seems to be working fine. Please take a look at this StackBlitz project for the same.

Can you kindly create a sample project reproducing the issue either in StackBlitz or locally & share it with us over Google-Drive or Onedrive. Also, kindly brief us more about the issue you are facing along with the version of CanvasJS StockChart that you are using so that we can understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS