[Ananya]

@junker1224,

It’s not possible to have unequal intervals for axis labels. As a workaround, you can dynamically add striplines at the first Y-value of each series by iterating through chart.options.data. Please take look at this JSFiddle for an example of the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

Khurram,

The options you have shared seem to be working fine. Kindly create a JSFiddle reproducing your issue, so that we can understand the scenario better, and help you out.

—
Ananya Deka
Team CanvasJS

[Ananya]

@khurram-khan,

There have been bug fixes and improvements with regards to indexLabels in the previous versions. You might be using an older version of CanvasJS, which might be the reason you are facing this issue. Kindly download the latest version of CanvasJS Charts from our download page, update it in your application, and let us know if the issue still persists.

Considering this as duplicate of Issue in chart indexLabel, and hence closing the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

@khurram-khan,

There have been bug fixes and improvements with regards to indexLabels in the previous versions. You might be using an older version of CanvasJS, which might be the reason you are facing this issue. Kindly download the latest version of CanvasJS Charts from our download page, update it in your application, and let us know if the issue still persists.

—
Ananya Deka,
Team CanvasJS

[Ananya]

@khurram-khan,

indexLabelPlacement set to inside seems to be working fine. Kindly create a JSFiddle reproducing the issue you are facing and share it with us, so that we can look into the code and help you out. Also, please ensure you are using the latest version of CanvasJS in your application.

—
Ananya Deka
Team CanvasJS

[Ananya]

@scompliance,

You can format crosshair labels using labelFomatter, similar to axis labels. Also, toolTipContent overrides contentFormatter, and hence we suggest you to use just contentFormatter. To format x-values from different series in different formats, you can update formatDateInUTC to accept formatString as shown in this updated JSFiddle.

—
Ananya Deka
Team CanvasJS

[Ananya]

@scompliance,

By default, JavaScript Date objects are displayed based on the client’s local timezone. If you wish to format the displayed date object in UTC, you can use labelFormatter and contentFormatter to format the labels and the tooltip content, respectively.

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

—
Ananya Deka
Team CanvasJS

[Ananya]

@khurram-khan,

Kindly check if you are using the latest version of CanvasJS, which includes bug fixes, and improvements. If the issue still persists, please share a JSFiddle demonstrating your use case, so we can understand your scenario better and help you out.

—
Ananya Deka,
Team CanvasJS

[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 3 months, 3 weeks 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 7 months, 2 weeks ago by Ananya.