[Manoj Mohan]

@mohanraj-b,

jQuery script seems to be working fine without any issue. If you are still facing issue, kindly try including the script from the official jQuery CDN or from cdnjs.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mohanraj-b,

CanvasJS doesn’t provide CDN for jquery scripts. To include jquery in your project, you can either host jquery in your server or load it from official jQuery CDN or from cdnjs.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@edad_msft,

CanvasJS charts plots all the chart-elements on HTML5 canvas element, which is considered as an image by the narrator. Hence it’s not possible to have accessibility for individual datapoint as of now. However, you can pass aria-label field to the entire chart to achieve accessibility. Please take a look at this JSFiddle for an example on the same.

Also, please refer to this forum thread for more information.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@samuel-cheng,

Considering this as the duplicate of toggle legend crash with axisX2 and hence, closing the same.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@samuel-cheng,

It seems like issue is happening when you are setting interval on datetime axis and none of the dataseries is visible. To overcome this issue, you can unset the interval when the dataseries is not visible and vice-vera when dataseries is visible as shown in the below code snippet.

itemclick: function (e) {
    if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.chart.options.axisX2.interval = undefined;
        e.dataSeries.visible = false;
    } else {
        e.chart.options.axisX2.interval = 3;
        e.dataSeries.visible = true;
    }

    e.chart.render();
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@reactdeveloper,

You can set a flag on rangeChanging and rangeChanged event handler and check the flag before executing the functionality of click event handler as shown in the code snippet below.

let chartRangeChanging = false
.
.
rangeChanging: () => { chartRangeChanging = true },
rangeChanged: () => { chartRangeChanging = false },
.
.
function handleClick() {
  if (currentViewedDps.length != 0 && !chartRangeChanging)
    alert(
      'DataPoint with { label: ' +
      currentViewedDps[0].label +
      ', y: ' +
      currentViewedDps[0].y +
      '} is clicked'
    );
}
.
.

Please take a look at this updated Stackblitz example for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@reactdeveloper,

To show datapoint information on clicking part of area chart as well, you can bind a click event on chart container and with the help of tooltip updated event, you can display the information about datapoint when clicked. Please take at the below code snippet for the same.

let currentViewedDps = [];
.
toolTip: {
  updated: function (e) {
    currentViewedDps = [];
    e.entries.forEach((entry) => {
      currentViewedDps.push(entry.dataPoint);
    });
  },
    hidden: function (e) {
      currentViewedDps = [];
    },
}
.
.
useEffect(() => {
  if (chart != null) {
    chart.container.addEventListener('click', handleClick);
    return function () {
      chart.container.removeEventListener('click', handleClick);
    };
  }
});
.
.

Also, check out this StackBlitz project for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@appsoft,

You can easily add needle to gauge chart as explained briefly in this thread. As briefed in the thread, adding a div and customizing it’s style to position it on top of chart should work in your case.

/*HTML*/
<div class="speedometer-needle" #needle></div>

/* CSS */
.speedometer-needle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  top: 50%;
  left: 50%;
  transition: 0.3s ease-in-out;
  transform: translate(-50%, 0%) rotate(0deg);
  margin: 8px 0 0;
}

.speedometer-needle:before {
  content: '';
  position: absolute;
  border-radius: 5px;
  border: 6px solid transparent;
  border-right: 100px solid #000;
  left: -130px;
  top: 10px;
  width: 0;
  height: 0;
}

/* To position the needle above chart based on value */
this.renderer.setStyle(
      this.needle.nativeElement,
      'transform',
      'translate(-50%, 0%) rotate(' +
        parseInt(this.gauge.valueText.text) * (180 / this.gauge.maximum) +
        'deg)'
);

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

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joelson-castro,

Can you kindly create sample project reproducing the issue you are facing & share it with us over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you out?

At the same time, kindly check if you are using one of the standard date-formats if your data includes date-time. Some of the browsers handles date-time even if you pass date in wrong format whereas some browsers don’t.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anexgate,

Glad that you figured it out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@top9x-lee,

Can you kindly create sample project reproducing the issue you are facing & share it with us over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anexgate,

There are couple of issue in the sample that you have shared. Please find them address below.
1. CanvasJS & jQuery scripts are not present in the project
2. Variable names are not proper across multiple files (getData.php, getSearch.php & index.php).
Below is the code-snippet with the updated variable names.

/* getSearch.php */
echo json_encode($data_points, JSON_NUMERIC_CHECK); -> echo json_encode($yr_arr, JSON_NUMERIC_CHECK);

/* getData.php */
$handle->bindParam(":year",$_POST["year"], PDO::PARAM_INT); -> $handle->bindParam(":year",$_GET["curnt_year"], PDO::PARAM_INT);

/* index.php */

$.getJSON("getSearch.php", data, function(result){ -> $.getJSON("getSearch.php", function(response){
.
.
$.getJSON("getData.php", data, function(result){ -> $.getJSON("getData.php", data, function(response){

Please download the updates sample project form here.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anexgate,

Can you kindly create sample project with sample data reproducing the issue you are facing & share it with us over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@cmayo,

The above issue is happening due to combination of float and absolute positioning of dom elements. You can check this StackOverflow thread for more information about the issue. In order to overcome this issue in your scenario, you can specify float as left or right for chart container and use clearfix hack for the parent element to handle the difference in height of floated elements. You can check this page for more information about the clearfix hack for handling float elements. Please take a look at this updated JSFiddle for an example on the same.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

JE,

Angular Universal (Server Side Rendering) renders the application twice, once in server environment without any browser API and tries to load CanvasJS. Since CanvasJS requires browser environment and API’s to run, so we need to prevent running it in server environment. You can do so by modifying our chart component to import CanvasJS only when document object is present. Also, while adding canvasjs-chart to html, you can add ngIf attribute directive to add chart in client side only

/*canvasjs.angular.component.ts*/
.
.
if(typeof document === 'object' && !!document)
    var CanvasJS = require('./canvasjs.min');
.
.
/*app.component.ts*/
export class AppComponent {
  isDOMPresent:Boolean = typeof document === "object" && !!document;
  .
  .
}
/*app.component.html*/
<div>
  <canvasjs-chart  *ngIf="isDOMPresent" [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>
</div>

Please take a look at this sample project for an example on CanvasJS Angular Chart with Angular Universal(SSR).

—-
Manoj Mohan
Team CanvasJS