[Vishwas R]

@tbr,

It seems to be working fine with PostgreSQL. Please take a look at sample project.

Bitnami provides WAPP Stack to work with PHP and PostgreSQL. I would suggest you to try WAPP over XAMPP for PostgreSQL.

If you are still facing any issue, please share the sample project along with sample database over Google-Drive or Onedrive, so that we can run it locally at our end, understand your use-case properly and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sonamallied,

We don’t have official NPM package as of now. However, CanvasJS Chart works fine with all versions of Angular / AngularJS including Angular 5. Below are the steps to integrate CanvasJS Chart / StockChart in your angular app.
1. Save canvasjs.min.js (canvasjs.stock.min.js incase of StockChart) within source-folder of your Angular application ( src or src/assets or src/lib )
2. Import the library into your app.
For Chart: import * as CanvasJS from './canvasjs.min';
For StockChart: import * as CanvasJS from './canvasjs.stock.min';

Once it’s imported, you are ready to go. Now you can create Chart / StockChart, pass options & render them.

Please check out Angular Gallery for examples on integrating charts in Angular app.

—
Vishwas R
Team CanvasJS

[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

[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

[Vishwas R]

Michael,

Based on the chart width, you can remove labels with the help of labelFormatter. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@operationsteam,

The gap you observe in the chart is dues to null dataPoints. You can draw a line between 2 adjacent non-null dataPoints by setting connectNullData property in dataSeries level to true. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@asha,

Incase of stacked charts, you can use #index to show indexLabels at both side of the dataPoint, i.e. you can set indexLabel: "{y[#index]}" in dataSeries as shown in second example in range-column documentation page. Please refer documentation on indexLabel for more customization options available.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ttquang1063750,

It seems your chart render the data two sides the upside render for the positive value and the downside render for the negative value.

Theoretically, negative values should be rendered below 0 and positive above 0. To make it look like even the negative values are positive, the work-around you are using seems to be a better option.

when I have hidden the income bar then the chart looks ugly.

To retain the range of the axis even after hiding the dataSeries, you can set axis minimum and maximum as shown in this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@npshannon,

Thanks for the follow up. We have already prioritized this bug and we are working on it. We will get back to you in couple of days on the fix for the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ttquang1063750,

You can use Stacked Column Chart to achieve this. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tedadradro,

As mentioned earlier it’s not possible to have minimum height of the column / bar as of now. However by setting axis range to a smaller value by keeping difference between viewportMinimum and viewportMaximum smaller along with adding scale-breaks, dataPoints can be made visible which helps you visualize better.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tedadradro,

It’s not possible to set minimum-height of the column / bar, as of now. We will consider this behavior for future versions. However combination of Scalebreaks and Zooming / Panning would help you in this scenario. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@antimatter,

You can change font-family of title, axis-title, axis-labels by setting fontFamily, titleFontFamily and labelFontFamily respectively. Please take a look at this JSFiddle, where Google Font is used for title.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@pwang,

Updating the index of dataSeries in intervalTypeChanger should work fine in your case. You are updating the dataPoints of first series in intervalTypeChanger instead of fourth series. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@adjmpw,

dataSeries are attached to either primary Y-axis (axisY) or secondary Y-axis (axisY2) by setting axisYType to “primary” or “secondary” respectively. Setting axisYType to “secondary” in scatter series should render scatter series across axisY2, irrespective of static or dynamic dataPoints. Please find the updated code below:

data: [{
	lineThickness: 2,
	type: "scatter",
	name: "depth",
	axisYIndex: 0,
	axisYType: "secondary",
	dataPoints: gdepth[id],
	markerSize: 4,
}, {
	markerSize: 0,
	lineThickness: 2,
	name: "price",
	type: "line",
	color: "black",
	axisYIndex: 2,
	dataPoints: gprice[id],
}, {
	fillOpacity: 0.1,
	markerSize: 0,
	lineThickness: 1,
	axisYType: "secondary",
	name: "volume",
	type: "column",
	color: "black",
	dataPoints: gvolume[id],
}]

If you are still facing any issue, kindly create JSFiddle reproducing the issue you are facing so that we can look in to it and help you out.

—
Vishwas R
Team CanvasJS