[Vishwas R]

@p42510,

In CanvasJS StockChart, the navigator range takes priority over the chart’s range, meaning the chart’s range can’t extend beyond the navigator’s range. As a result, adding padding using viewportMaximum doesn’t work directly. To add padding, you can extend the navigator’s range by inserting null data points before the first and after the last data point. This way, you can simulate padding and ensure the chart has some space around the visible data.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jhansen,

CanvasJS tooltip is a HTML <div> element & lets you use any HTML content, such as <b>, <i>, <br>, <span>, <table>, <img>, and more, with the help of contentFormatter property. You can style these elements using inline CSS for formatting and layout control.

Are tables supported?

Yes, tables (<table>, <tr>, <td>) are fully supported. You can use contentFormatter to create a table dynamically, such as a three-column layout for series name, x-value, and y-value:

toolTip: {
  shared: true,
  contentFormatter: function(e) {
    var content = "<table style='border-collapse: collapse; font-family: Arial; font-size: 12px;'>";
    content += "<tr><th style='border: 1px solid #ccc; padding: 5px;'>Series</th>" +
               "<th style='border: 1px solid #ccc; padding: 5px;'>Quarter</th>" +
               "<th style='border: 1px solid #ccc; padding: 5px;'>Sales</th></tr>";
    for (var i = 0; i < e.entries.length; i++) {
      content += "<tr><td style='border: 1px solid #ccc; padding: 5px;'>" + e.entries[i].dataSeries.name + "</td>" +
                 "<td style='border: 1px solid #ccc; padding: 5px;'>" + e.entries[i].dataPoint.x + "</td>" +
                 "<td style='border: 1px solid #ccc; padding: 5px;'>" + e.entries[i].dataPoint.y + "</td></tr>";
    }
    content += "</table>";
    return content;
  }
}

Please refer to this Codepen for a working example of the same.

For more customization tips, see Customizing CanvasJS Chart Tooltips with Simple CSS Tweaks.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@komal-arora,

By design, our zoom and pan functionalities are integrated under zoomEnabled to ensure a streamlined user experience, as only one action—zooming or panning—can be performed at a time. This approach simplifies interaction, particularly for large datasets. While we appreciate your suggestion, we believe the current mode-switching design meets most use cases effectively. For an example of implementing separate buttons to toggle zooming and panning, please take a look at this CodePen

—
Vishwas R
Team CanvasJS

[Vishwas R]

@komal-arora,

Thank you for your feedback regarding separate zoom and pan controls in CanvasJS. By design, our zoom and pan functionalities are integrated under zoomEnabled to ensure a streamlined user experience, as only one action—zooming or panning—can be performed at a time. This approach simplifies interaction, particularly for large datasets. While we appreciate your suggestion, we believe the current mode-switching design meets most use cases effectively. For an example of implementing separate buttons to toggle zooming and panning, please take a look at this CodePen

—
Vishwas R
Team CanvasJS

[Vishwas R]

Khurram,

You can set the suffix property of axisY to “QMB” to display labels as 10QMB, 20QMB, etc. If you’d like to show something before the numbers, use the prefix property. For more details and live examples, please refer to the documentation.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@vkkindia,

There are three different charts with datapoint values of 1000, 500, and 900. The reason 900 looks shorter than 500 in another chart is that the axis doesn’t start from 0. Setting includeZero to true across all the charts should work fine in this case, making the values display consistently.

—
Vishwas R

[Vishwas R]

@vkkindia,

The datapoint with the y-value of 900 should appear longer than the one with 500, and it seems to be working as expected in this case. Can you kindly create JSFiddle reproducing the issue you are facing & share it with us? Sharing the link with us will help us analyze the chart options and code in detail, so we can provide a more precise solution.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nelly25,

The gap between the y-axis title and labels is caused by the stripLines with labelPlacement: "outside" and a transparent label reserving space in the problematic dataset (y-values ~124–233), as the stripline’s value (150) is within the axis range, affecting the layout. In the commented dataset (y-values ~43–63), the stripline’s value is outside the axis range, making it invisible and eliminating the gap. You can remove stripLines from axisY or set labelPlacement: "inside" to fix this issue.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Chris,

We have just released StockChart v1.13.0GA with this improvement. Please refer to this release blog for more information. Kindly download the latest version from Download Page & let us know your feedback.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@khurram-khan,

Sorry, heatmap is not available as of now. However, you can achieve the same using Stacked Column 100% chart as mentioned earlier. Please refer to this article for more information on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@g4naq,

It seems your VB.Net code is creating two <script> blocks with separate window.onload functions, causing the second chart (“ITU Zones”) to overwrite the first (“QSOs by Hour”), resulting in a blank first chart. To fix this, either combine the instantiation and render of both the charts within a single window.onload function in one <script> block, or place a single <script> block without window.onload at the end of the <body> tag to execute after the DOM loads. Both approaches ensure both charts render correctly in your Windows Forms app’s WebBrowser control.

If the issue persists, kindly create sample project (sample / dummy data) reproducing the issue you are facing & share it with us via Google Drive or OneDrive so that we can run it at our end to understand the scenario better & help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Chris,

Thanks for your feedback! You’re correct, buttons like “1M” and “6M” adjust the start date relative to the current end date, keeping the end fixed. For example, “1M” shows data from one month before the end date to the end date. We will revisit our documentation to address this.

We agree that the “YTD” behavior can be unintuitive and will revisit this in future releases.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@aisolutions,

Sorry, it’s not possible to position indexlabels at the center of the bar in range-bar charts. However, setting indexLabelPlacement: "inside" will display the indexlabels inside the bar instead of the default outside position.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@aizaz,

You can add a custom button to the CanvasJS toolbar using DOM manipulation (e.g., append a button to .canvasjs-chart-toolbar). After chart.render(), you can create a button element, style it to match the toolbar and append it. Ensure the chart is rendered first, as the toolbar won’t exist otherwise. Please find the code-snippet below.

var toolbar = document.getElementsByClassName("canvasjs-chart-toolbar")[0];
var button = document.createElement("button");
toolbar.appendChild(button);

Please take a look at this JSFiddle for a working example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Shannon,

When exporting a CanvasJS chart, only the native chart elements are included in the exported image. Custom DOM elements, such as external legends, are not part of the chart and therefore won’t appear in the export.

If your goal is to display custom legends and include them in the exported image, one workaround is to use dummy dataseries to represent those legends within the chart itself. This way, they become part of the chart and will be included in the export. Please checkout the code-snippet demonstrating how to create a dummy series for this purpose:

{
	type: "scatter",
	showInLegend: true,
	legendText: "Dummy Legend",
	legendMarkerType: "square",
	legendMarkerColor: "red",
	dataPoints: [{}] // Empty datapoint
}

This approach ensures that your custom legend appears in the chart area and is included when exporting.

—
Vishwas R
Team CanvasJS