Range column chart

[asha]

Hi,
I am using range column chart. My Click event& tool tips are not working with in it.

please check my code.

weekBarGraph(barGraphData:any,lowTemp:any,hiTemp:any) {
    this.barWeekChart = new CanvasJS.Chart("chartContainer", {
  theme: "light2", // "light1", "light2", "dark1", "dark2"
  animationEnabled: true,
  axisY: {
    //includeZero: false,
    //interval: 10,
    gridThickness: 0,
    title: "Temperature",
    maximum: this.hiTempThreashold,
    ///minimum: this.lowTempThreshold,
    stripLines: [{
      value: this.lowTempThreshold,
      color: "green",
      labelFormatter: function ( e ) {
               return  + e.stripLine.value;
         }
    },
      {
        value: this.hiTempThreashold,
        color: "red",
        labelFormatter: function ( e ) {
               return  + e.stripLine.value;
         }
      }],
  },
  dataPointWidth: 40,
  axisX: {
    //includeZero: false,
    gridThickness: 0,
    title: "time",
    minimum: new Date(this.fromDate),
    maximum: new Date(this.toDate),
    valueFormatString: "DD MMM YYYY",
    intervalType: "day",
    interval:1,
    labelWrap:true,
    labelMaxWidth:50,
    labelAngle: 0

  },
  data: [
    {
      type: "rangeColumn",
      //yValueFormatString: "$#,##0.00",
      xValueFormatString: "DD MMM YYYY",
      indexLabel: "{y[#index]}" ,
      click: onClick,
      dataPoints: barGraphData
    }
  ]
});
this.barWeekChart.render();
function onClick(e) {
		console.log( e );
	}
}

[Vishwas R]

@asha,

Tooltip and click event seems to be working fine. Can you kindly create JSFiddle reproducing the issue you are facing and brief us further about the same, so that we can look into the issue and help you resolve it.

—
Vishwas R
Team CanvasJS

[asha]

I am using canvasjs in my Ionic mobile app. Is that a problem?

[Vishwas R]

@asha,

CanvasJS works fine even with Ionic apps. Please take a look at this GitHub repository, where CanvasJS Charts are used in Ionic App.

Kindly check if you are using official version of CanvasJS and not from NPM, as we don’t have official NPM package as of now. If you are using NPM version of CanvasJS I would suggest you to download it from our download page. After downloading, you can save CanvasJS file (canvasjs.min.js) in src folder of your project (‘src/assets/js’ or ‘src/lib’) and import the CanvasJS library to your app using import CanvasJS from 'canvasjs.min' (path may vary based on file location like ‘./src/assets/js/canvasjs.min’ or ‘./src/lib/canvasjs.min’). Or you can add it in your html file using script-tag. Please take a look at this ionic documentation on Adding 3rd Party Libraries.

Also please refer this tutorial on How to Install 3rd Party Libraries in Ionic 2 and step-by-step guide given in this github thread for more info.

—
Vishwas R
Team CanvasJS

[asha]

I am using Canvasjs 2.2 ,downloaded from official site and not using npm. But still its not working any other solutions?
Thanks in advance.

[Vishwas R]

@asha,

It seems to be working fine with ionic 3 across browsers including Chrome, Firefox, Safari, Edge and IE. Please take a look at this sample project.

If the issue still persists, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, try it at our end to understand the scenario better and help you resolve it.

—
Vishwas R
Team CanvasJS

[asha]

Hi,
on loading graph, this tooltip class is given display:none css already in my page

.canvasjs-chart-tooltip{
position: absolute;
height: auto;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px;
z-index: 1000;
pointer-events: none;
display: none;
border-radius: 5px;
}

[Vishwas R]

@asha,

It seems to be working fine, please take a look at working sample shared in previous reply.

Kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can run the actual code that’s causing issue and debug to resolve it.

—
Vishwas R
Team CanvasJS