[Ananya]

@chikwado,

You can use the showAt() method to programmatically move the crosshair along the axis. This method allows you to position the crosshair at any specific value on axisX (or axisY), which can help you achieve the scrolling effect you want. Please find the code-snippet below.

var xValue = 10, timeoutId;
function moveCrosshair() {
  
  if (xValue > 90) {
    clearTimeout(timeoutId);
    return;
  }
  chart.axisX[0].crosshair.showAt(xValue);
  xValue += 10;
  timeoutId = setTimeout(moveCrosshair, 500);
}
moveCrosshair();

Please take a look at this JSFiddle for a working example.

If this does not fulfill your requirements, could you please brief us more about it, so that we can understand your scenario better and help you out?

—
Ananya Deka
Team CanvasJS

[Ananya]

@elidria-srl-sb,

The issue you’re facing happens as CanvasJS places each datapoint based on its exact timestamp. When the number of datapoints per day varies—like 96 points on some days and 24 on others—the chart ends up spacing them unevenly since it’s reflecting the actual time intervals between points.

To get around this and ensure even spacing between datapoints, you have a couple of options. One is to aggregate your data so that each day contributes the same number of points, such as daily averages or fixed hourly intervals. This way, the timestamps will be evenly spaced, and the chart will render more uniformly.

Another approach is to use the label property instead of actual x values. This turns the x-axis into a category axis, which places each point at equal intervals regardless of its timestamp. It’s especially useful if you don’t need precise time scaling and just want the chart to look balanced visually.

—
Ananya Deka
Team CanvasJS

[Ananya]

@siwatec,

You can pass any custom property within striplines, which can then be accessed programmatically. For instance, you might include a custom property like “data” in your stripline object and this won’t be displayed, but it will be available for use in your code.

stripLines:[
    {                
        value: 1940,
        label: "In the 40s",
        data: "my stripline"
    }
]

The property can later be accessed through the chart options as chart.options.axisX.stripLines[0].data.

—
Ananya Deka
Team CanvasJS

• This reply was modified 1 month, 1 week ago by Ananya.

[Ananya]

@mpf,

Glad you figured it out and it’s working fine now.

—
Ananya Deka
Team CanvasJS

[Ananya]

@mrdavid,

It is not possible to align the axes, as their minimum and maximum values are independent of each other. However, for your particular scenario you can set the maximum and minimum properties of Axis Y according to that of Axis Y2. Please take a look at this JSFiddle for an example of the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

@chikwado,

Glad that you were able to resolve the issue on your own.

—
Ananya Deka
Team CanvasJS

[Ananya]

@chikwado,

Please create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive, so that we can run it locally on our end, understand the scenario better and help you out.

—
Ananya Deka
Team CanvasJS

• This reply was modified 5 months, 1 week ago by Ananya.

[Ananya]

@andersfriisigis,

In Range Area Chart with tooltip.shared = false, tooltip is shown only when the mouse hovers over a specific datapoint, displaying the start and end values for that range. In multi-series chart, it will not combine values from different series and will show information for the hovered datapoint only. When tooltip.shared = true, the tooltip appears even when not hovering directly over a datapoint, displaying information for the nearest datapoint based on the x-value and y-values across all the series.

—
Ananya Deka
Team CanvasJS

[Ananya]

@benove,

CanvasJS chart renders whatever datapoints are passed in chart-options. Generating the datapoints using the python library suggested in the article, and passing it to the chart should work in your case.

—
Ananya Deka
Team CanvasJS

[Ananya]

[UPDATE]

@rck,

We have released chart v3.10.19 with the above fix. Please refer to the release blog for more information. Do download the latest commercial version from My Account Page and let us know your feedback.

—
Ananya Deka
Team CanvasJS

[Ananya]

@khurram-khan,

Please make sure that the CDN you are using in your project is that of stockchart (https://cdn.canvasjs.com/canvasjs.stock.min.js). If you are still facing issue after that, kindly check the browser console for any errors and let us know, so that we can understand the scenario better and help you out.

—
Ananya Deka
Team CanvasJS

[Ananya]

@rck,

Thank you for reporting the use case, we will look into it further. Meanwhile, you can work around this by adding a datapoint in the scatter chart with the concerned x value, and set y value as null, so that tooltip is not shown in that region.

Please take a look at this updated JSFiddle for the working example of the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

@arj,

Can you kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can run it locally at our end to understand scenario better, and help you out?

—
Ananya Deka
Team CanvasJS

[Ananya]

asbuka,

Date-time values over y axis is not supported as of now. However, formatting the timestamp values to show it as date-time using labelFormatter should work fine in this case. Please take a look at this JSFiddle for a working example of the same.

Please refer to this article for more information about creating Gantt Charts.

—
Ananya Deka
Team CanvasJS

[Ananya]

@arj,

We are unable to reproduce the issue. Can you kindly create a JSFiddle (or a sample project) reproducing the issue and share it with us so that we can run it locally at our end, understand the scenario better and help you out?

—
Ananya Deka
Team CanvasJS