[Thangaraj Raman]

@jhansen,

In the case of Stacked Charts, datapoints across multiple dataseries are aligned based on x-values and not labels. Passing x-value along with the label should work fine in this case.

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

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@komal-arora,

CanvasJS can render millions of data points (line series) in just a few hundred milliseconds, smoothly. However, within a chart width of approximately 1000px, displaying millions of data points can overwhelm the visualization, making it hard to discern meaningful patterns. Instead, you can use data grouping or aggregation to create clearer, more insightful charts.

Check out this article for effective techniques like time-based grouping, random sampling, and stratified sampling: The Importance of Data Sampling and Grouping in Data Visualization.

Best Practices:

• Group data by time (e.g., hours, days) for time-series charts.
• Use random or stratified sampling for large datasets.
• Set markerSize: 0 to optimize rendering.
• Load data dynamically (e.g., via AJAX) for zoom/pan interactions.

Try out different sampling techniques to fit your data or scenario!

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Christoph,

You can use the label property to show custom labels on the x-axis.

If this does not meet your requirements, please brief us more and share an example along with a pictorial representation so that we can understand your scenario better and help you out.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diptangshu-dutta

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

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@wrvanalphen,

To align the primary y-axes across all charts, first identify the chart whose y-axis is positioned farthest to the right using axis bounds (chart.axisY[0].bounds.x2). Next, calculate the difference between this value and the y-axis bound (x2) of each chart, and set that difference as the y-axis margin for the corresponding chart.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[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 7 months, 1 week 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