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
Indexlabels for line charts are placed to top of the marker, unless there is insufficient space towards the boundary of the plotarea. Hence, it’s not possible to place indexlabel to above or below markers as per the conditions in line chart.
—-
Manoj Mohan
Team CanvasJS
Can you please brief us further about your requirement along with an example so that we can understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS