@darshanjain,
Indexlabels are shown even when the datapoint range are partially outside the viewport region in case of range bar charts and it seems to be working fine.
Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?
—– Manoj Mohan Team CanvasJS
@meenasiva,
Indexlabels are rendered on top of stripline by default. However, when showOnTop property of stripline is set to true, stripline gets rendered on top of every other element including indexlabel. In order to view the indexlabel clearly in your scenario, you can set the indexLabelBackgroundColor to the chart background color. Please take a look at this JSFiddle for an example on the same.
@arshad,
Glad that you we able to figure it out.
—- Manoj Mohan Team CanvasJS
The code shared above seems to be working fine. Please take a look at this StackBlitz project for the same.
Can you kindly create a sample project reproducing the issue either in StackBlitz or locally & share it with us over Google-Drive or Onedrive. Also, kindly brief us more about the issue you are facing along with the version of CanvasJS StockChart that you are using so that we can understand the scenario better and help you out.
@tgriffiths,
Legends are generally shown in dataseries level except pie, donut, funnel & pyramid charts. However, you can add dummy dataseries to achieve your requirement. Please take a look at this updated sample project.
@xmanhattan,
If you are looking to pass variable from PHP to JS, please refer to this page. If this doesn’t meet your requirement, kindly brief us further about your requirement so that we can understand your scenario better and help you out with an appropriate solution.
You can get the chart toolbar reference using document.getElementsByClassName("canvasjs-chart-toolbar")[0]. You can add extra options like ‘Export as PDF’ or pass url under it to the obtained toolbar reference. Also, please take a look at this JSFiddle for an example where “Export as CSV” feature is added to the toolbar.
document.getElementsByClassName("canvasjs-chart-toolbar")[0]
@ezsolve,
You can check if tooltip is shown for overlapped datapoint using updated event of toolTip and show the tooltip for scatter series when it overlaps with the help of showAtX method. Please take a look at the code snippet below for the same.
toolTip: { updated: function(e) { var dp = false; // skip the check if tooltip is shown for scatter series if(e.entries.length == 1 && e.entries[0].dataSeriesIndex == 0 ) { dp = overlappedScatterSeriesDatapoint(e.entries[0].dataPoint, e.entries[0].dataPointIndex); if(dp) { stockChart.charts[0].toolTip.showAtX(dp.x, 1); } } } } . . function overlappedScatterSeriesDatapoint(dataPoint, index) { var radius = stockChart.charts[0].data[1].get("markerSize") / 2; var currentX = stockChart.charts[0].axisX[0].convertValueToPixel(dataPoint.x); var currentY = stockChart.charts[0].axisY[0].convertValueToPixel(dataPoint.y); for (var i=0; i<stockChart.charts[0].data[1].dataPoints.length; i++) { var dpX = stockChart.charts[0].axisX[0].convertValueToPixel(stockChart.charts[0].data[1].dataPoints[i].x) var dpY = stockChart.charts[0].axisY[0].convertValueToPixel(stockChart.charts[0].data[1].dataPoints[i].y) var distance = Math.sqrt((currentX - dpX) * (currentX - dpX) + (currentY - dpY) * (currentY - dpY)); // Check if tooltip is shown for datapoints overlapped with scatter data series if(distance <= radius) { return stockChart.charts[0].data[1].dataPoints[i] } } return false; }
Also, check out this JSFiddle for complete working code.
@darpit,
CanvasJS seems to be working fine with Next.js. Please take a look at this sample project for integration of CanvasJS Charts with Next.js.
If you are still facing the issue, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can look into your code, run it locally at our end to understand the scenario better and help you out.
@suraj106,
@canvasjs/angular-charts supports Angular 12+ as of now. If you like to add CanvasJS Angular chart in Angular 11, we suggest you to use CanvasJS Angular component that’s included in the build available in our download page. Please take a look at this Stackblitz project for an example on creating chart in Angular 11.
@benove,
You can check out CanvasJS StockChart which contains navigator and range selector to zoom into a region and select the range of values to be shown in the viewport of chart.
If this doesn’t meet 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 with an appropriate solution.
You can use vuetify slider component to control the data to be viewed in all the charts. Please take a look at this updated sample project[Link removed] for the same.
We are looking into your query and get back to you at the earliest.
@canvasjs/vue-charts supports from Vue 3+ as of now. However, you can use CanvasJS Vue Component(CanvasJSVueComponent.vue) to integrate CanvasJS Chart in Vue 2 applications. Please take a look at this sample project for an example on integration in Vue 2.
@pimohdaimaoh,
As addressed in the previous reply, you can use either Fetch API or ajax request to get the content of text file hosted in your server. Please take a look at the code snippet below for an example on the same using Fetch API.
fetch(url).then(res => res.text()).then(textContent => renderChart(textContent));
If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive 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.