[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@xmanhattan,

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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

We are looking into your query and get back to you at the earliest.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@meenasiva,

@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.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rr4v,

We have released v3.7.11 GA with improvements for chromium based browsers, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@gabpayne,

We have released v3.7.11 GA with improvements for chromium based browsers, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@canvascharterx,

It seems like you are rendering the chart before getting the data. Moving this.chartOptions.data = series;this.chart.render(); inside the subscribe callback function should work fine in your case.

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.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ankitlwt,

Since you are setting interval individually for all the chart, the datapoints in the chart are not matching with each other. Instead you can render all the charts at the same time by looping around all the charts and pushing the datapoints with similar x-value to all chart.

function updateChart() {
  for(var i=0; i<charts.length; i++) {
    if(mapChartDataPoints[i] != null) {
      var dps = mapChartDataPoints[i];
      charts[i].options.data[0].dataPoints.push({x: new Date(dps[CounterDps].BATCH_TIME), y: parseFloat(dps[CounterDps].VALUE)});
      charts[i].data[0].dataPoints.shift();        
      charts[i].render();
    }
  }
  CounterDps++;
}

Please take a look at this updated sample project for complete working code.

—-
Manoj Mohan
Team CanvasJS