[Ananya]

@williamcochran,

You can set axis minimum to 0 and maximum to 100 to fix the range of axisY.

—
Ananya Deka
Team CanvasJS

[Ananya]

@jmedlock,

Glad that you figured out the solution and were able to make it work.

—
Ananya Deka
Team CanvasJS

[Ananya]

@jmedlock,

Could you please share the image again, as the link shared seems to be broken?

Also, the color is different for the columns rising up vs those dropping down.

You can change the color of column using color property of dataPoint as shown in the code snippet below –

function setColor(chart){
	for(var i = 0; i < chart.options.data.length; i++) {
  	dataSeries = chart.options.data[i];
  	for(var j = 0; j < dataSeries.dataPoints.length; j++){
    	if(dataSeries.dataPoints[j].y <= 0)
      	dataSeries.dataPoints[j].color = 'rgb(170, 0, 0)';
    }
  }
}

Also, please take a look at this JSFiddle which shows setting different colors to positive and negative values.

—
Ananya Deka
Team CanvasJS

[Ananya]

@jhansen,

Equating hoveredSeries === e.entries[i].dataSeries.index should work for you, even in the case of missing datapoints. Please take a look at this updated JSFiddle for the complete code.

—
Ananya Deka
Team CanvasJS

[Ananya]

@jhansen,

You can use the mouseover event of the dataseries to detect which series is being hovered over, and use toolTip contentFormatter to style it accordingly.

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

—
Team CanvasJS
Ananya Deka

[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