[Manoj Mohan]

@himanshu-singhal,

You can place the stripline labels outside the plotarea, so that it doesn’t overlap any columns. However, if you like to place it inside itself and like to move it away from the columns, you can increase the viewportMaximum of axisX. Please take a look at this updated JSFiddle for an example.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Aung,

Range Selector and Navigator are part of StockChart, and not Chart. Using StockChart instead of Chart should fulfill your requirement.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@indxx,

Importing ‘@canvasjs/react-stockcharts’ dynamically for client side rendering should resolve the issue happening with the build script as well. Please take a look at the code snippet below for the same.

import dynamic from "next/dynamic";
const CanvasJSStockChart = dynamic(() => import("@canvasjs/react-stockcharts").then((mod) => mod.default.CanvasJSStockChart ), { ssr: false });

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

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@indxx,

StockChart seems to be working fine with Next.js. Please take a look at this sample project for integration of CanvasJS StockChart with Next.js.

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ajit,
You can use Range Column Chart to show base of the column at -150 by passing the first y values as -150 and second value same as your existing y value for column chart. Please take a look at the code snippet for the converting column to rangeColumn and starting column at -150.

for(var i=0; i<chart.options.data[0].dataPoints.length; i++) {
  chart.options.data[0].dataPoints[i].y = [-150, chart.options.data[0].dataPoints[i].y]; 
}
chart.options.data[0].type = "rangeColumn";

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[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