[Thangaraj Raman]

@khurram-khan,

You can use dataPointWidth to set a custom fixed width for the data points.

Alternatively, you can also set dataPointMaxWidth to automatically limit the width of columns when the number of datapoints increases.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@khurram-khan,

To prevent axis labels from overlapping when interval is set, you can rotate the labels using labelAngle.

To make the chart horizontally scrollable, you can use the code snippet below:

<div class="wrapper" style="width: 100%; overflow-x: auto">
  <div id="chartContainer" style="height: 360px; width: 200%;"></div>
</div>

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@dieterp,

Glad that you figured it out :)

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@khurram-khan,

You can create a chart with multiple x-axes and use striplines to show labels on these axes based on your requirement as shown in this JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ayankhan21,

Please take a look at this StackBlitz for the same example in React.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ayankhan21,

Rounded corners are currently not supported in column charts as of now, but it’s on our wishlist for future updates. In the meantime, adding border-radius in the example shared in this article will help in achieving your requirement as shown in this JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

The example that I shared earlier was created for a numeric axis, however your example has a date-time axis. Please check this updated JSFiddle for an example on zooming using mouse wheel for a date-time axis.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

You are setting the x-axis interval to 1 minute due to which the chart might freeze as it is unable to render such a large dataset at a 1 minute interval. Setting a larger interval will fix this.

Please check the StackBlitz for an example.

—
Thangaraj Raman
Team CanvasJS.

[Thangaraj Raman]

@diano4ka,

We have released Chart v3.10.11 with a few bug fixes related to axis. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

The example that you shared is working fine in Angular with the latest version. Can you please create a sample project reproducing the issue that you are facing and share it over OneDrive / Google Drive, so that we can run it locally at our end, understand the scenario better, and help you resolve that?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

In a spline chart, the curve/smoothness of the line is based on the consecutive datapoints. In your example, the curve is not observable due to the datapoint values.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

The first few datapoints are not displayed initially because you are setting the x-axis interval to 1 minute, however, there is insufficient data to show a 1-minute interval. Setting the interval to 1 minute after there is data for more than a minute will fix this as shown in the code snippet below:

if(this.options.data[0].dataPoints.length > 30) {
	 this.options.axisX.interval = 1;
   this.options.axisX.intervalType = 'minute';
}

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@chatrsimab,

Adding a click event to axis labels is not possible as of now.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

Although there are no dataseries attached to a particular y-axis, the axis line will still be shown on the chart since its properties have been defined in the axisY/axisY2 array of objects. Removing these objects from axisY/axisY2 should work fine in your case.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@kinokatsu,

Reducing your destination point to 95% of its actual value seems to be working fine with the current line thickness that you have set. Please check this updated JSFiddle for working code.

—
Thangaraj Raman
Team CanvasJS