We were unable to reproduce the issue as the code that has been shared above is missing some dependencies when running it. Can you kindly share code along with sample data over Google-Drive or Onedrive so that we can reproduce the issue at our end and help you out?
—-
Manoj Mohan
Team CanvasJS
Chart seems to be working fine even when opening a page on more than 20 tabs containing 8-10 dynamic/real-time charts. Although we see marginal increase in GPU usage but chart doesn’t disappear. Can you kindly share a complete code over Google-Drive or Onedrive reproducing the issue you are facing along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
I want to only radius the upper right and left parts of the data series in the column chart. Is this possible?
Sorry, it is not possible to have corner radius in column chart as of now.
Can I set the background color and frame color of the data series in the column chart separately?
Are you looking for interlaced color? To change the color of the column, you can use color property of datapoint. If this doesn’t fulfill your requirement, kindly share a pictorial representation and brief us further about your requirement so that we can understand your scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
To remove the weekend gap from the chart, you can use customBreaks as shown in this code snippet.
function removeWeekendGap(chart) {
var scaleBreaks = [],
dps = chart.data[0].dataPoints;
for (var i = 1; i < dps.length; i++) {
if (dps[i].x.getDate() - 1 != dps[i - 1].x.getDate())
scaleBreaks.push({
startValue: new Date(
dps[i - 1].x.getTime() + 12 * 60 * 60 * 1000
),
endValue: new Date(dps[i].x.getTime() - 12 * 60 * 60 * 1000),
});
}
chart.axisX[0].scaleBreaks.customBreaks = scaleBreaks;
chart.render();
}
Please check out this Stackblitz for complete working code.
—-
Manoj Mohan
Team CanvasJS
Marco,
To zoom into a certain region, there should be a minimum of 3-4 dataPoints – behavior is designed such that zooming is limited upto a certain region, so the user doesn’t end up zooming into a blank-region (region with no dataPoints). It is not possible to change the restriction as of now.
—-
Manoj Mohan
Team CanvasJS
One of our representatives from the sales team will get in touch with you regarding license query.
For any other license related queries feel free to contact us at sales@canvasjs.com.
—-
Manoj Mohan
Team CanvasJS
You can host the commercial version of the CanvasJS chart package (@canvasjs/charts) on your own server by following these steps:
@canvasjs/charts": "https://your-server.com/packages/canvasjs-charts-v3.10.16.tar.gz
This approach avoids conflicts with public npm versions and integrates smoothly into your CI system. Please refer to this article for more information.
—-
Manoj Mohan
Team CanvasJS
@arj,
You can reset dataPointWidth to auto-calculated value by setting it to null
after rendering the chart with desired dataPointWidth.
chart.set("dataPointWidth", null)
—
Manoj Mohan
Team CanvasJS
@arj,
Thank you for your feedback on the column gaps in the chart. The varying space between the columns occur to make them look crisp & avoid a blurry appearance, especially with a larger number of datapoints. We’ll revisit this behavior to improve it in future versions. In the meantime, you can try setting dataPointWidth to a smaller value if that helps in your case.
—-
Manoj Mohan
Team CanvasJS
You can easily load the data from your API endpoint on the click of the button and display loader while requesting data to smoothen the experience. You could also store the data in local variable so that you don’t request same data repeatedly on clicking of button. Please take a look at this JSFiddle for an example on loading daily, weekly, and monthly on click of bootstrap buttons.
—-
Manoj Mohan
Team CanvasJS
You can use scatter chart to display indexLabel above and below the datapoint marker as shown in the code snippet below.
var indexLabelSeries = {
type: "scatter",
markerSize: 0,
highlightEnabled: false,
toolTipContent: null,
dataPoints: []
};
for(var i=0; i<chart.data[0].dataPoints.length; i++) {
var dp = chart.data[0].dataPoints[i];
lastDp = i > 0 ? chart.data[0].dataPoints[i-1].y : chart.data[0].dataPoints[i].y;
labelPlacement = lastDp > chart.data[0].dataPoints[i].y ? "below": "above";
indexLabelSeries.dataPoints.push({
x: dp.x,
y: chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(dp.y) + (chart.data[0].markerSize + (labelPlacement == "below" ? -42 : -16 )) * (labelPlacement == "below" ? -1 : 1) ),
indexLabel: "" + (chart.data[0].dataPoints[i].y - lastDp)
});
}
chart.options.data.push(indexLabelSeries)
chart.render();
Also, check out this JSFiddle for complete code.
—-
Manoj Mohan
Team CanvasJS