[Thangaraj Raman]

@arj,

It is not possible to display labels on the vertical axis in a Box & Whisker chart. However, as a workaround, you can rotate the chart using CSS to achieve a similar effect. Please take a look at this JSFiddle for an example of the same.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@arj,

Please fork/save the JSFiddle and then share the link with us so that we can understand your requirement and help you out.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@arj,

You can use the labelFormatter function to customize labels displayed on the y-axis.

If this does not meet your requirements, please brief us further 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]

@flanguy,

Labels are positioned equidistantly, and controlling the starting point of axis labels is not possible as of now. However, you can use striplines to place ticks at required positions on the axis by setting the stripline thickness to 0 and tickThickness to 1 as shown in the code snippet below:

{
	value: new Date(2026, 0, 6, 12, 0, 0),
	labelPlacement: "outside",
	label: "12PM",
	labelFontColor: "grey",
	labelBackgroundColor: "transparent",
	thickness: 0,
	tickThickness: 1,
	tickColor: "grey"
}

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ben551445,

The z value in a bubble chart sets the size of the bubble, which is used for visualizing the difference in value between the dataPoints. The size of the bubble depends on the relative difference in the z value of dataPoints, which depends on multiple factors like the minimum z value, the maximum z value, etc.

In your case, having a dummy datapoint with a minimum z value of 0 should work. Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[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 1 year, 2 months ago by Thangaraj Raman.