[Thangaraj Raman]

Tahir,

Your response to the previous query was under moderation.

You can use customBreaks to remove gaps created by weekends and non-trading hours, as shown in this updated JSFiddle.

Considering this thread as a duplicate of managing gap between candlestick and hence closing the same.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Tahir,

You can use customBreaks to remove gaps created by weekends and non-trading hours, as shown in this updated JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@tahir,

Please create a JSFiddle reproducing the issue that you are facing and share it with us so that we can look into the code, understand the scenario better, and help you out.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@tahir,

The date-time axis is linear, hence all dates/times within a date range will be displayed on the x-axis regardless of the data being passed.

To make all candlesticks equidistant, you can pass labels instead of x values for the candlesticks. This way, CanvasJS will automatically distribute them evenly on the x-axis without considering the actual time intervals. However, if your scenario requires using x-values (for accurate timestamps), you can use scaleBreaks to remove the gaps during non-trading hours.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@dpanscik,

To make the y-axis stationery, you can position an overlayed canvas on top of the stockchart and copy the y-axis onto the overlayed canvas.

Please check this StackBlitz for a working example.

—
Thangaraj Raman
Team CanvasJS

• This reply was modified 3 weeks ago by Thangaraj Raman.

[Thangaraj Raman]

@erich,

Glad that you were able to figure it out.

—
Thangaraj Raman
Team CanvasJS

[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