vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
fix-react-test-merge-conflict
DefinitelyTyped/types/canvasjs/index.d.ts
Nathan Shively-Sanders f0ce987bc1 Update project urls to match NPM url 
Note that this *trivially* updates project urls by adding the NPM url to
the end, even when the urls are almost identical or the DT one is
outdated. I'll clean up the urls in a later commit.

This PR is unfinished! Please do not merge it yet.
2019-02-11 17:10:55 -08:00

1674 lines
72 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Type definitions for CanvasJS 1.9
// Project: http://canvasjs.com/, https://github.com/tsur/canvasjs
// Definitions by: ShuYin Zhang <https://github.com/brutalimp>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
type DashType = "solid" | "shortDash" | "shortDot" | "shortDashDot" | "shortDashDotDot" | "dot" | "dash" | "dashDot" | "longDash" | "longDashDot" | "longDashDotDot";
declare namespace CanvasJS {
class Chart {
/**
* The current options of the chart.
*/
options: ChartOptions;
/**
* All Title options become available as properties after Chart Render. You can access them either via get method or dot notation. But you can change / set those values only via set method.
*/
readonly title: ChartTitle;
/**
* The subtitles of the chart.
* You can access them either via get method or dot notation. But you can change / set those values only via set method.
*/
readonly subtitles: ChartTitle[];
/**
* The toolTip of the chart.
*/
readonly toolTip: ChartToolTip;
readonly axisX: ChartAxisX[];
readonly axisX2: ChartAxisX[];
readonly axisY: ChartAxisY[];
readonly axisY2: ChartAxisY[];
readonly stripLines: ChartStrip[];
readonly data: ChartDataSeries[];
/**
* Initializes a new instance of CanvasJS Chart.
* @param containerId the DOM ID of the location where the chart is to be rendered
* @param options the options used to render the chart
*/
constructor(containerId: string, options?: ChartOptions);
/**
* Renders the chart.
*/
render(): void;
/**
* Returns the specified property of Chart.
* @param propertyName Name of the property.
*/
get(propertyName: string): any;
/**
* Sets the specified property of Chart.
* Notes:
* 1. Chart should be rendered before you can use this method.
* 2. Because the chart updates each time set is called by default,
* it is recommended to disable auto update (set updateChart to false) till the last step if you have to set multiple properties.
* Otherwise it can affect performance because of repeated chart rendering. You can see an example below.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: ChartOptions, updateChart?: boolean): void;
/**
* Adds a new element of given type to the specified array. For example, it can be used to add new Axis to axisY array.
* Notes:
* 1. Chart should be rendered before you can use this method.
* 2. Chart renders automatically after addTo() operation.
* @param propertyName Name of the property
* @param options Option for the new element
* @param index Index of the array where the new element is to be added. Defaults to the length (end) of array.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
addTo(propertyName: string, options: ChartAxisXOptions | ChartAxisYOptions | ChartDataSeriesOptions, index?: number, updateChart?: boolean): void;
/**
* Export the chart as image (jpg / png).
* @param options Setting when export
*/
exportChart(options: { format: "jpg" | "png", toDataURL?: boolean, fileName?: string }): void;
/**
* Prints the Chart.
* Chart should be rendered before you can use this method.
*/
print(): void;
/**
* Removes the chart references internally, thus making the chart eligible for garbage collection, in turn clearing up the memory.
* Notes:
* 1. On calling chart.destroy(), chart won’t be responsive unless new chart is created.
* 2. chart.destroy() should be called before using the same variable to hold a newly allocated object/chart to prevent memory leaks.
*/
destroy(): void;
}
/**
* Adds a new chart color set
* @param colorSetName name of the color set
* @param colorSetArray array of colors.
*/
function addColorSet(colorSetName: string, colorSetArray: string[]): void;
/**
* Adds a new culture info for your chart
* @param culture the name of the culture
* @param info information used by this culture
*/
function addCultureInfo(culture: string, info: CultureInfo): void;
/**
* Formats number according to the given formatString(optional) & culture(optional).
* @param number Number to format.
* @param formatString Default formatString is “#,##0.##” .
* @param culture Default culture is “en”
*/
function formatNumber(number: number, formatString?: string, culture?: string): string;
/**
* Formats date/timestamp according to the given formatString(optional) & culture(optional).
* @param date Date type or timestamp number.
* @param formatString Default formatString is “DD MMM YYYY”.
* @param culture Default culture is “en”.
*/
function formatDate(date: Date | number, formatString?: string, culture?: string): void;
interface CultureInfo {
/**
* Character used to separate fractional part from the whole number.
* Default: "."
* Example: “.“ ”,”
*/
decimalSeparator?: string;
/**
* Also referred to as Thousand Separator.
* Default: “,”
* Example: “,”, “.”
*/
digitGroupSeparator?: string;
/**
* Text is shown inside the Button till v1.4
* v1.5 onwards Text is shown as tooltip.
* Default: "Zoom"
* Example: “zoom”, etc
*/
zoomText?: string;
/**
* Text is shown inside the Button till v1.4
* v1.5 onwards Text is shown as tooltip.
* Default: “Pan”
* Example: “pan”, etc
*/
panText?: string;
/**
* Text is shown inside the Button till v1.4
* v1.5 onwards Text is shown as tooltip.
* Default: “Reset”
* Example: “reset”, etc
*/
resetText?: string;
/**
* Set text is shown instead of Save as PNG.
* Default: “Save as PNG”
* Example: “save as png”, etc
*/
savePNGText?: string;
/**
* Set text is shown instead of Save as JPG.
* Default: “Save as JPG”
* Example: “save as jpg”, etc
*/
saveJPGText?: string;
/**
* Tool Tip for Menu Button.
* Default: “More Options”
* Example: “More Options”, etc
*/
menuText?: string;
/**
* Day names starting from Sunday. Should be exactly 7 in total.
* Default: [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”]
* Example: [“domingo”, “lunes”, “martes”, “miércoles”, “jueves”, “viernes”, “sábado”]
*/
days?: string[];
/**
* Short Day names starting from Sunday. Should be exactly 7 in total.
* Default: [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”]
* Example: [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”]
*/
shortDays?: string[];
/**
* Month Names starting from January.
* Default: [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]
* Example: [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]
*/
months?: string[];
/**
* Short Month Names starting from January.
* Default: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”]
* Example: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”]
*/
shortMonths?: string[];
}
interface ChartOptions {
/**
* Enables / Disables Chart interactivity like toolTip, mouse and touch events.
* Default: true
* Example: false, true
*/
interactivityEnabled?: boolean;
/**
* Sets the duration of animation in milliseconds.
* Default: 1200
* Example: 1000, 500 etc.
*/
animationDuration?: number;
/**
* Enables Animation while rendering the Chart.
* Default: true
* Example: false, true
*/
animationEnabled?: boolean;
/**
* While exporting any chart, "Chart" is used as the default fine name with corresponding extension "jpg" or "png". You can override this name using exportFileName property.
* Default: Chart
*/
exportFileName?: string;
/**
* Setting exportEnabled to true enables the export feature. As of now JPG & PNG formats are supported. Export feature is available in all Chart Types.
* Default: false
* Options: true, false
*/
exportEnabled?: boolean;
/**
* Setting zoomEnabled to true enables zooming and panning feature of Chart.
* This way you can zoom into an area of interest when there is a large amount of data.
* This will also allow you to pan through the chart.
* If not set, the property is automatically enabled for large number of dataPoints. You can switch between zooming & panning using the toolbar that appears on the chart.
* After Zooming in, you can reset the chart by clicking the reset button.
* Default: false
* Options: true, false
*/
zoomEnabled?: boolean;
/**
* Sets the theme of the Chart. Various predefined themes are bundled along with the library. User can easily switch these themes by changing theme property to the below mentioned options.
* Default: "theme1"
* Options: "theme1","theme2", "theme3"
*/
theme?: string;
/**
* Sets the background color of entire Chart Area. Values can be "HTML Color Name", "hex code" or "rgba values"
* Default: "white"
* Example: "yellow", "#F5DEB3"..
*/
backgroundColor?: string;
/**
* Sets the colorSet of the Chart. Color Set is an array of colors that are used to render data. Various predefined Color Sets are bundled along with the library.
* You can either choose from the pre-defined Color Sets or define your own Color Set.
* Default: "colorset1" or as defined in the selected theme
* Example: "colorSet1", "colorSet2", "colorSet3"
*/
colorSet?: string;
/**
* CanvasJS allows you to localize various culture / language / country specific elements in the Chart like number formatting style – where you can choose
* which character to use as a decimal separator and as a digit group separator (also referred to as a thousand separator).
* By default CanvasJS is set to Neutral English Culture – "en".
* Default: "en"
*/
culture?: string;
/**
* Sets the width of the Chart.
* Default: Takes chart container’s width by default. If the width is not set for the chart container, defaults to 500.
* Example: 380, 500, 720
*/
width?: number;
/**
* Sets the width of the Chart
* Default: Takes chart container’s height by default. If the height is not set for the chart container, defaults to 400.
* Example: 260, 300, 400
*/
height?: number;
/**
* dataPointMaxWidth sets the maximum width of dataPoints in column / bar, ohlc and candlestick, charts.
* This allows you to limit the width of dataPoints when there are very few of them in the chart.
* At the same time, when the number of dataPoints increase, chart reduces their width so that they don’t overlap.
* Default : Automatically calculated based on the chart size.
* Example : 10, 20, 30, etc.
*/
dataPointMaxWidth?: number;
/**
* Title allows you to set content, appearance and position of Chart’s Title.
*/
title: ChartTitleOptions;
/**
* Whenever the chart contains multiple dataSeries, it is recommended to represent each dataSeries in a legend.
* This way it becomes easier for the user to know what exactly is represented by each of the dataSeries.
* In case of Pie and Doughnut charts, an entry is created for each dataPoint and in rest of the chart types entries are created for each dataSeries.
* You can selectively show or hide a dataSeries in the Legend using showInLegend property of dataSeries.
*/
legend?: ChartLegendOptions;
/**
* axisX object lets you set various parameters of X Axis like interval, grid lines, etc. It is mostly horizontal, except when we are working with Bar Charts, where axisX is vertical.
*/
axisX?: ChartAxisXOptions | ChartAxisXOptions[];
/**
* axisX2 is the secondary axis which renders on the opposite of primary axis (axisX).
* It is mostly horizontal on top, except when we are working with Bar Charts, where axisX2 is vertical on right.
*/
axisX2?: ChartAxisXOptions | ChartAxisXOptions[];
/**
* axisY object lets you set various parameters of Y Axis like interval, grid lines, etc. It is mostly vertical, except when we are working with Bar Charts, where axisY is horizontal.
*/
axisY?: ChartAxisYOptions | ChartAxisYOptions[];
/**
* axisY2 is the secondary axis which renders on the opposite of primary axis (axisY). It is mostly vertical, except when we are working with Bar Charts, where axisY2 is horizontal.
*/
axisY2?: ChartAxisYOptions | ChartAxisYOptions[];
/**
* toolTip object lets user set behaviour of toolTip at global level like enabling/disabling animation, setting Border Color, sharing toolTip between multiple dataSeries, etc.
* You can also disable the toolTip by setting enabled property to false.
*/
toolTip?: ChartToolTipOptions;
/**
* data is an array of dataSeries Objects.
*/
data: ChartDataSeriesOptions[];
/**
* subtitles is a collection of subtitle elements. This allows you to have as many subtitles as you want in a chart.
* subtitle allows you to set content, appearance and position of Chart’s subtitle. subtitle is very much like title except that its font size is lesser than title by default.
*/
subtitles?: ChartTitleOptions[];
}
interface ChartTitleOptions {
/**
* Sets the Title’s text.
* Default: null
* Example: "Chart title"
*/
text?: string;
/**
* This property lets you align the Chart Title vertically.
* Default: "top"
* Options: "top", "center", "bottom"
*/
verticalAlign?: string;
/**
* This property lets you align the Chart Title horizontally.
* Default: "center"
* Options: "left", "right", "center"
*/
horizontalAlign?: string;
/**
* Sets the font Size of Chart Title in pixels.
* Default: 20
* Example: 16,18,22 ..
*/
fontSize?: number;
/**
* Sets the Font Family of Chart Title.
* Default: "calibri, Optima, Candara, verdana, Geneva, sans-serif"
* Example: "arial" , "tahoma", "verdana" ..
*/
fontFamily?: string;
/**
* Sets the Font Weight used in the Chart Title.
* Default: "normal"
* Options: "lighter", "normal", "bold" , "bolder"
*/
fontWeight?: string;
/**
* Sets the font color of Chart Title. The value of fontColor can be a "HTML Color Name" or "hex" code .
* Default: "black"
* Example: "red", "#FAC003" ..
*/
fontColor?: string;
/**
* Sets the fontStyle of Chart Title. fontStyle can be set to one of the below options.
* Default: "normal"
* Options: "normal", "italic" , "oblique"
*/
fontStyle?: string;
/**
* Sets the thickness of border around the Title in pixels. To display border around title, set the borderThickness to a number greater than zero.
* Default: 0
* Example: 2,4 ..
*/
borderThickness?: number;
/**
* To display rounded borders around the title, set the cornerRadius of title. Higher the value, more rounded are the corners.
* Default: 0
* Options: 5,8 ..
*/
cornerRadius?: number;
/**
* Sets the color of border around Chart Title. Values of borderColor can be "HTML Color Name" or "hex" code .
* Default: "black"
* Example: "red", "#FF0000" ..
*/
borderColor?: string;
/**
* Sets the background color of Chart Title. Values can be "HTML Color Name" or "hex" code.
* Default: null
* Example: "red", "#FF0000" ..
*/
backgroundColor?: string;
/**
* This property lets you set margin around the Chart Title in pixels.
* Default: 5
* Example: 4,12 ..
*/
margin?: number;
/**
* This property allows you to set the padding for Chart Title
* Default: 0
* Example: 5, 8 ..
*/
padding?: number;
/**
* Wrap specifies whether to wrap the title once its width crosses maxWidth or not. If it is set to false, title gets clipped after reaching maxWidth.
* Default: true;
* Example : true, false
*/
wrap?: boolean;
/**
* Sets the maximum width of title after which it gets wrapped or clipped depending on whether wrap is set to true (default) or false.
* Default: Automatically calculated based on the chart size.
* Example: 200, 400 ..
*/
maxWidth?: number;
/**
* When dockInsidePlotArea is set to true, title renders inside the plot area there by giving more space to plot area.
* Default: false
* Example: false, true.
*/
dockInsidePlotArea?: boolean;
}
interface ChartTitle extends ChartTitleOptions {
/**
* Can be accessed via get method or dot notation.
*/
readonly bounds: {
x1: number,
x2: number,
y1: number,
y2: number,
};
/**
* Returns the specified property of title.
* @param propertyName Name of the property.
*/
get(propertyName: string): string | number | boolean;
/**
* Sets the specified property of Title.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: string | number | boolean, updateChart: boolean): void;
/**
* Removes title of the chart.
*/
remove(): void;
}
interface ChartLegendOptions {
/**
* Sets the cursor type for legend items.
* Default: "default"
* Examples: "pointer", "crosshair" ..
*/
cursor?: string;
/**
* Sets the font Size of Legend Text in pixels.
* Default: 20
* Example: 16,18,22 ..
*/
fontSize?: number;
/**
* Sets the Font Family of Legend Text.
* Default: "calibri"
* Example: "arial" , "tahoma", "verdana" ..
*/
fontFamily?: string;
/**
* Sets the font color of Legend Text . The value of fontColor can be a "HTML Color Name" or "hex" code .
* Default: "black"
* Example: "red", "#FAC003" ..
*/
fontColor?: string;
/**
* Sets the Font Weight of Legend Text.
* Default: "normal"
* Example: "lighter", "normal", "bold" , "bolder"
*/
fontWeight?: string;
/**
* Sets the fontStyle of Legend Text. fontStyle can be set to one of the below options.
* Default: "normal"
* Example: "normal", "italic" , "oblique"
*/
fontStyle?: string;
/**
* This property lets you align the Legend Position vertically.
* Default: "bottom"
* Example: "top", "center", "bottom"
*/
verticalAlign?: string;
/**
* This property lets you align the Legend Position horizontally.
* Default: "right"
* Example: "left", "right", "center"
*/
horizontalAlign?: string;
/**
* Sets the margin between marker and text of each item inside legend.
* Default: Automatically calculated based on the chart size.
* Example: 4,12 ..
*/
markerMargin?: number;
/**
* Sets the mouseover event handler for the legend, which is triggered when the user moves the mouse(input device) over a legend item.
* After the event is triggered, the event related data is passed as a parameter to the assigned event handler. Parameters passed to the function are shown in the Event Object section below.
* @param event a chart event
*/
itemmouseover?(event: ChartEvent): void;
/**
* Sets the mousemove event handler for the legend, which is triggered when the user moves the mouse(input device) within a legend item.
* When the event is triggered, the event related data is passed as a parameter to the assigned event handler.
* Parameters passed to the function are shown in the Event Object section below.
* @param event a chart event
*/
itemmousemove?(event: ChartEvent): void;
/**
* Sets the mouseout event handler for the legend, which is triggered when the user moves the mouse pointer outside a legend item.
* After the event is triggered, the event related data is passed as a parameter to the assigned event handler.
* Parameters passed to the function are shown in the Event Object section below.
* @param event a chart event
*/
itemmouseout?(event: ChartEvent): void;
/**
* Sets the click event handler for the legend, which is triggered when the user clicks on a legend item.
* After the event is triggered, the event related data is passed as a parameter to the assigned event handler.
* Parameters passed to the function are shown in the Event Object section below.
* @param event a chart event
*/
itemclick?(event: ChartEvent): void;
/**
* Setting reversed property to true shows legend items in reverse order.
* Default: false;
* Example: true, false
*/
reversed?: boolean;
/**
* Sets the maximum width of legend. If any item is longer than the maxWidth, it gets wrapped or clipped depending on the itemWrap property. itemWrap is true by default.
* Whenever items are stacked horizontally, new items are moved to the next row once maxWidth is reached.
* Default: Automatically calculated based on the chart size.
* Example: 100, 200, 500 etc.
*/
maxWidth?: number;
/**
* Sets the maximum height of legend. Once the maximum height is reached, remaining legend items are not shown when horizontally stacked (while on top or bottom or plotArea)
* and a new column is created when items are vertically stacked (when displayed to the left or right of plotArea).
* Default: Automatically calculated based on chart size.
* Example: 100,200, 300 etc.
*/
maxHeight?: number;
/**
* Sets the maximum width of individual legend items after which they get wrapped or clipped depending on whether itemWrap is set to true (default) or false.
* itemMaxWidth can’t be greater than maxWidth of legend.
* Default: Automatically calculated based on the chart size.
* Example: 100, 150, 200 etc.
*/
itemMaxWidth?: number;
/**
* Sets the width of individual legend items after which the it gets wrapped or clipped depending on whether itemWrap is set to true (default) or false.
* itemWidth can’t be greater than itemMaxWidth and maxWidth of legend.
* Default: Automatically calculated based on chart size.
* Example: 100, 200, 300 etc.
*/
itemWidth?: number;
/**
* itemWrap specifies whether to wrap or clip legendText once its width crosses itemMaxWidth / maxWidth.
* Default: true
* Example: true, false
*/
itemWrap?: boolean;
/**
* A custom formatter function that returns text to be displayed inside individual legend items.
*/
itemTextFormatter?(e?: { chart: Chart, legend: ChartLegendOptions, dataSeries: ChartDataSeriesOptions, dataPoint: ChartDataPoint }): string;
/**
* When dockInsidePlotArea is set to true, legend renders inside the plot area there by giving more space to plot area.
* Default: false
* Example: true, false
*/
dockInsidePlotArea?: boolean;
}
interface ChartLegend extends ChartLegendOptions {
/**
* Returns the specified property of legend.
* @param propertyName Name of the property.
*/
get(propertyName: string): number | string | boolean;
/**
* Sets the specified property of legend.
* @param propertyName Name of the property.
* @param value Name of the property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: number | string | boolean, updateChart?: boolean): void;
}
interface ChartEvent {
/**
* The x value of the item
*/
x: any;
/**
* The y value of the item
*/
y: number;
/**
* The chart object
*/
chart: Chart;
/**
* The datapoint options
*/
dataPoint: ChartDataPoint;
/**
* The data series options
*/
dataSeries: ChartDataSeriesOptions;
/**
* The index of the data point
*/
dataPointIndex: number;
/**
* The index of the data series
*/
dataSeriesIndex: number;
}
interface ChartAxisOptions {
/**
* Sets the Axis Title.
* Default: null
* Example: "Axis X Title"
*/
title?: string;
/**
* Sets the Font Color of Axis Title. The value of titleFontColor can be a "HTML Color Name" or "hex" code .
* Default: "#666666"
* Example: "red", "#006400" .
*/
titleFontColor?: string;
/**
* Sets the Font Size of Axis Title in pixels.
* Default: 20
* Example: 16, 25 ..
*/
titleFontSize?: number;
/**
* Sets the Font Family of Axis Title.
* Default: "arial"
* Example: "calibri", "tahoma, "verdana" ..
*/
titleFontFamily?: string;
/**
* Sets the Font Weight used in the Axis Title. It can be set to one of the options below.
* Default: "normal"
* Options: "lighter", "normal", "bold" , "bolder"
*/
titleFontWeight?: string;
/**
* Sets the Font Style of Axis Title. It can be set to one of the below options.
* Default: "normal"
* Options: "normal", "italic" , "oblique"
*/
titleFontStyle?: string;
/**
* This property lets you set margin between chart’s boundary and Axis.
* Default: 2
* Example: 8, 10..
*/
margin?: number;
/**
* Sets the color of Axis line. Axis line color can be a "HTML Color Name" or "hex" code .
* Default: "#BBBBBB"
* Example: "blue","#21AB13"..
*/
lineColor?: string;
/**
* Sets the Thickness of Axis line in pixels.
* Default: 2
* Example: 2, 4..
*/
lineThickness?: number;
/**
* Sets the dash type for axisY.
* Default: "solid"
*/
lineDashType?: DashType;
/**
* Sets the minimum value of Axis. Values smaller than minimum are clipped. minimum also sets the lower limit while panning chart.
* Default: Automatically Calculated based on the data.
* Example: 100, 350..
*/
minimum?: number;
/**
* Sets the maximum value permitted on Axis. Values greater than maximum are clipped. maximum also set the upper limit while panning chart.
* Default: Automatically Calculated based on the data.
* Example: 100, 350..
*/
maximum?: number;
/**
* Viewport is the visible range of the axis and viewportMinimum allows you to set its minimum value.
* This can be used in combination with viewportMaximum in order to zoom into a certain region programmatically.
* Default: Automatically Calculated based on the data.
* Example: -100, 350..
*/
viewportMinimum?: number;
/**
* Viewport is the visible range of the axis and viewportMinimum allows you to set its minimum value.
* This can be used in combination with viewportMaximum in order to zoom into a certain region programmatically.
* Default: Automatically Calculated based on the data.
* Example: -100, 350..
*/
viewportMaximum?: number;
}
interface ChartStripLinesOptions {
/**
* Sets the point where the stripLine has to be plotted or drawn along the axis X.
* Default: null
* Example: 20,30,100,50
*/
value?: number;
/**
* Sets the point where the stripLine’s shaded region begins on the x-axis.
* Default: null
* Example: 20,30,100,50
*/
startValue?: number;
/**
* Sets the point where the stripLine’s shaded region ends on the x-axis.
* Default: null
* Example: 50,60,200,300
*/
endValue?: number;
/**
* Sets the thickness of the stripLine in pixels.
* Default: 2
* Example: 2,4,5,6
*/
thickness?: number;
/**
* Sets the color of the stripLine.
* Default: "orange"
* Example: "green", "#23EA23"
*/
color?: string;
/**
* Sets the label of the stripLine. These are shown on top of axis labels.
* Default: "" (empty string)
* Example: "Threshold", "Deaths in 1920"
*/
label?: string;
/**
* labelPlacement allows you to place stripline’s Label either inside or outside of plotArea.
* Default: “inside”
* Options: “inside”, “outside”
*/
labelPlacement?: string;
/**
* labelAlign allows you to place the stripline’s Label far, center or near the axis.
* Default: “far”
* Options: “far”, “center”, “near”
*/
labelAlign?: string;
/**
* Setting labelWrap to true wraps the labels at labelMaxWidth. Clips the same when set to false. It overrides the labelWrap set at axis level.
* Default: true
* Example: true, false.
*/
labelWrap: boolean;
/**
* labelMaxWidth defines the maximum width of labels after which they get wrapped or clipped depending on labelWrap’s value.
* It overrides the labelMaxWidth value set at axis level.
* Default: Automatically calculated based on the length of label.
* Example: 4, 20, 100 etc.
*/
labelMaxWidth: number;
/**
* Sets the background color of stripLine’s label.
* Default: "#eeeeee"
* Example: "red","#fabd76"
*/
labelBackgroundColor?: string;
/**
* Sets the font-family of stripLine’s label. If the first font is not found in the system from the specified font-family list, it tries to use the next font in the list.
* Default: "arial"
* Example: "Arial, Trebuchet MS, Tahoma, sans-serif"
*/
labelFontFamily?: string;
/**
* Sets the font color of label.
* Default: "orange"
* Example: "blue","#4135e9"
*/
labelFontColor?: string;
/**
* Sets the font size of the label in pixels.
* Default: 12
* Example: 18,19,20,22
*/
labelFontSize?: number;
/**
* Sets the font weight of stripLine’s label.
* Default: "normal"
* Example: "lighter","normal","bold","bolder"
*/
labelFontWeight?: string;
/**
* Sets the font style of stripLine’s label.
* Default: "normal"
* Example: "normal","italic","oblique"
*/
labelFontStyle?: string;
/**
* stripLine is displayed on top of dataPoints when showOnTop is set to true.
* Default: false
* Example: true, false
*/
showOnTop?: boolean;
/**
* Sets the Dash Type for stripLine.
* Default: solid
*/
lineDashType?: DashType;
/**
* Sets opacity of stripLine.
* Default: null
* Example: .1, .5, 1 etc.
*/
opacity?: number;
/**
* A custom formatter function that returns stripLine’s label.
*/
labelFormatter?(e?: { chart: Chart, axis: ChartAxisYOptions, stripline: ChartStripLinesOptions }): string;
}
interface ChartStrip extends ChartStripLinesOptions {
/**
* Returns the specified property of stripLines.
* @param propertyName Name of the property
*/
get(propertyName: string): number | string | boolean;
/**
* Sets the specified property of stripLines.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: number | string | boolean, updateChart: boolean): void;
/**
* Removes specified stripLine from stripLines Array.
*/
remove(): void;
}
interface ChartAxisXOptions extends ChartAxisOptions {
/**
* TitleWrap specifies whether to wrap or clip axis title once its width crosses titleMaxWidth.
* Default: true
* Options: true, false
*/
titleWrap?: boolean;
/**
* Sets the maximum width of title after which it gets wrapped or clipped depending on whether titleWrap is set to true (default) or false.
* Default: Automatically calculated based on the length of axis.
* Example: 100, 200...
*/
titleMaxWidth?: number;
/**
* Sets the Axis Label background color. The value of labelBackgroundColor can be a “HTML Color Name” or “hex” code.
* Default: “transparent”
* Example: “red”,”#fabd76″
*/
labelBackgroundColor?: string;
/**
* Sets the maximum width of label after which it gets wrapped or clipped depending on whether labelWrap is set to true (default) or false.
* Default: Automatically calculated based on the length of label.
* Example: 4, 20, 100 etc.
*/
labelMaxWidth?: number;
/**
* labelWrap specifies whether to wrap or clip label once its width crosses labelMaxWidth.
* Default: true
* Example: true, false
*/
labelWrap?: boolean;
/**
* Setting labelAutoFit to true automatically wraps and/or rotates and/or reduces font size of label when they are too long and overlaps,
* finds the best-fit and automatically manages label overlapping.
* Default: true
* Options: true, false
*/
labelAutoFit?: boolean;
/**
* Sets the angle for Axis Labels.
* Notes:
* 1.Units in degrees.
* 2.Values can be positive or negative.
* Default: null;
* Example: 20, 45, -30..
*/
labelAngle?: number;
/**
* Sets the Font Family of Axis labels.
* Default: “calibri, optima, Candara, Verdana, Geneva, sans-serif”
* Example: “calibri”, “tahoma”, “verdana” ..
*/
labelFontFamily?: string;
/**
* Sets the Axis Label color. The value of labelFontColor can be a "HTML Color Name" or "hex" code .
* Default: "grey"
* Example: "red", "#FAC003" ..
*/
labelFontColor?: string;
/**
* Sets the Axis Label Font Size in pixels.
* Default: Automatically Calculated based on Chart Size
* Example: 16, 18, 22..
*/
labelFontSize?: number;
/**
* Set the font Weight used in Axis Labels. It can be set to one of the options below.
* Default: "normal"
* Options: "lighter", "normal", "bold" , "bolder"
*/
labelFontWeight?: string;
/**
* Sets the Font Style of Axis Labels. It can be set to one of the below options.
* Default: "normal"
* Options: "italic", "oblique", "normal"
*/
labelFontStyle?: string;
/**
* A string that prepends all the labels on axisX.
* Default: null
* Example: "$","cat"..
*/
prefix?: string;
/**
* A string that appends all the labels on axisX.
* Default: null
* Example: "$","cat"..
*/
suffix?: string;
/**
* Defines how values must be formatted before they appear on Axis X.
* You can format numbers and date time values using this property.
* More Detail: https://canvasjs.com/docs/charts/chart-options/axisx/valueformatstring/
*/
valueFormatString?: string;
/**
* Sets the distance between Tick Marks, Grid Lines and Interlaced Colors.
* Default: Automatically Calculated
* Example: 50, 75..
*/
interval?: number;
/**
* intervalType is the unit of interval property.
* intervalType is by default set to "number" and hence you need to specify the interval type (eg "week", "month", etc) depending on the type of interval you intend to set.
* If required interval is 3 months, you need to provide interval as 3 and intervalType as "month"
* Default: Automatically handled when interval property is not set. Defaults to "number" when you set the interval.
* Option: "number","millisecond" ,"second"," minute", "hour", "day", "month" ,"year"
* Example: for interval as 15 minutes, set interval as 15, and set intervalType as "minute",
*/
intervalType?: string;
/**
* Setting reversed property to true shows axis in reverse order.
* Default: false
* Options: true, false
*/
reversed?: boolean;
/**
* Setting logarithmic property to true changes axis scale to logarithmic scale. Default Logarithm Base is 10 – which you can customize using logarithmBase property.
* Default: false
* Options: true, false
*/
logarithmic?: boolean;
/**
* Sets the logarithm base for Axis X. Works only when logarithm property is set to true.
* Default: 10
* Options: 2, 16, Math.E, ..
*/
logarithmBase?: number;
/**
* Sets the length of Tick Marks that are drawn on the Axis.
* Default: 5
* Example: 10, 14..
*/
tickLength?: number;
/**
* Sets the color of Tick Marks drawn on the axis. The value of tickColor can be a "HTML Color Name" or "hex" code .
* Default: "#BBBBBB"
* Example: "red", "#006400".
*/
tickColor?: string;
/**
* Sets the thickness of the Tick Marks in pixels.
* Default: 2
* Example: 3, 4..
*/
tickThickness?: number;
/**
* Sets the Interlacing Color that alternates between the set interval.
* If the interval is not set explicitly, then the auto calculated interval is considered. The value of interlacedColor can be a “HTML Color Name” or “hex” code.
* Default: null
* Example: "#F8F1E4", "#FEFDDF"...
*/
interlacedColor?: string;
/**
* Sets the Thickness of Grid Lines. To display grid on Axis X, set the Grid Thickness to a number greater than zero.
* Default: 0
* Example: 2,4 ..
*/
gridThickness?: number;
/**
* Sets the Color of Grid Lines. Value of gridColor can be a "HTML Color Name" or "hex" code .
* Default: "#BBBBBB"
* Example: "red", "#FEFDDF" ..
*/
gridColor?: string;
/**
* Sets the Dash Type for grid lines on axisX.
* Default: solid
*/
gridDashType?: DashType;
/**
* A custom formatter function that returns label to be displayed on axisX.
* Notes:
* 1.labelFormatter function should return a string.
* 2.You can use formatNumber and formatDate functions to format number/date values inside the formatter function.
*/
labelFormatter?(e: { chart: Chart, axis: ChartAxisYOptions, value: number, label: string }): string;
/**
* Strip Lines / Trend Lines are vertical or horizontal lines used to highlight/mark a certain region on the plot area.
* You can choose whether to draw a line at a specific position or shade a region on the plot area. Strip Lines are also referred to as Trend Lines.
*/
stripLines?: ChartStripLinesOptions | ChartStripLinesOptions[];
}
interface ChartAxisX extends ChartAxisXOptions {
/**
* Returns the specified property of Axis.
* @param propertyName Name of the property.
*/
get(propertyName: string): string | number | boolean;
/**
* Sets the specified property of Axis.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: string | number | boolean, updateChart: boolean): void;
/**
* Removes specified axis from axis Array.
*/
remove(): void;
/**
* Adds a new element of given type to the specified array. For example, it can be used to add new stripLine to stripLines array.
* @param propertyName Name of the property.
* @param options Option for the new element.
* @param index Index of the array where the new element is to be added. Defaults to the length (end) of array.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
addTo(propertyName: string, options: ChartStripLinesOptions, index?: number, updateChart?: boolean): void;
/**
* Return the pixel coordinate of the given value over axis.
* @param value Numeric value over Axis
*/
convertValueToPixel(value: number): number;
/**
* Return the value along Axis for given pixel coordinate.
* @param pixel pixel value over Axis
*/
convertPixelToValue(pixel: number): number;
}
interface ChartAxisYOptions extends ChartAxisXOptions {
/**
* When includeZero is set to true, axisY sets the range in such a way that Zero is a part of it. It is set to true by default.
* But, whenever y values are very big and difference among dataPoints are hard to judge,
* setting includeZero to false makes axisY to set a range that makes the differences prominently visible.
* Default: true
* Example: true, false
*/
includeZero?: boolean;
}
interface ChartAxisY extends ChartAxisYOptions {
/**
* Returns the specified property of Axis.
* @param propertyName Name of the property.
*/
get(propertyName: string): string | number | boolean;
/**
* Sets the specified property of Axis.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: string | number | boolean, updateChart: boolean): void;
/**
* Removes specified axis from axis Array.
*/
remove(): void;
/**
* Adds a new element of given type to the specified array. For example, it can be used to add new stripLine to stripLines array.
* @param propertyName Name of the property.
* @param options Option for the new element.
* @param index Index of the array where the new element is to be added. Defaults to the length (end) of array.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
addTo(propertyName: string, options: ChartStripLinesOptions, index?: number, updateChart?: boolean): void;
/**
* Return the pixel coordinate of the given value over axis.
* @param value Numeric value over Axis
*/
convertValueToPixel(value: number): number;
/**
* Return the value along Axis for given pixel coordinate.
* @param pixel pixel value over Axis
*/
convertPixelToValue(pixel: number): number;
}
interface ChartToolTipOptions {
/**
* While mouse hovers from one dataPoint to another there is a smooth transition in toolTip.
* This effect can be controlled by animationEnabled Property. Setting it to false, will disable the animation and toolTip will directly switch from one dataPoint to the other.
* Default: True
* Example: True, False
*/
animationEnabled?: boolean;
/**
* Enables or Disables the toolTip for the chart.
* Default: True
* Example: True, False
*/
enabled?: boolean;
/**
* In a Multi-Series or a Combination Chart, it is often required to display all values common to x value in a single bubble.
* Setting shared to true will show in a common bubble all the values of y from each series next to their name.
* Default: True
* Example: True, False
*/
shared?: boolean;
/**
* Sets the border color around Tool Tip. When not set it takes the color of corresponding dataSeries or dataPoint.
* Default: dataSeries color/ dataPoint color
* Example: "red", "#808080"..
*/
borderColor?: string;
/**
* toolTip for entire chart can be set by adding content at toolTip object.
* content can either be a string or a custom function that returns HTML/String to be displayed inside the toolTip.
* Default: auto
*/
content?: string;
/**
* Sets the Font Color of toolTipContent. The value of fontColor can be a “HTML Color Name” or “hex” code.
* Default: “black”
* Example: “red”, “#FAC003″ ..
*/
fontColor?: string;
/**
* Sets the Font Style of ToolTip Content. It can be set to one of the below options.
* Default: “italic”
* Example: “normal”, “italic” , “oblique”
*/
fontStyle?: string;
/**
* Sets the font Size of ToolTip Content in pixels.
* Default: 14
* Example: 16,18,22 ..
*/
fontSize?: number;
/**
* Sets the Font Family of ToolTip Content.
* Default: “Calibri, Arial, Georgia, serif”
* Example: “arial” , “tahoma”, “verdana” ..
*/
fontFamily?: string;
/**
* Set the font Weight of ToolTip Content.
* Default: “normal”
* Example: “lighter”, “normal”, “bold” , “bolder”
*/
fontWeight?: string;
/**
* Sets the thickness of border around the toolTip in pixels. To display border around toolTip, set the borderThickness to a number greater than zero. Setting it to zero removes the border.
* Default: 2
* Example: 2,4 ..
*/
borderThickness?: number;
/**
* Setting a value higher than 0 makes the corners of toolTip rounded. Higher the value, more rounded the corners are.
* Default: 5
* Options: 2,3,8 ..
*/
cornerRadius?: number;
/**
* Reverses the order in which items inside toolTip are shown.
* Default: false
* Example: true, false
*/
reversed?: boolean;
/**
* A custom formatter function that returns the content (text/html) to be displayed inside the toolTip.
*/
contentFormatter?(e: { chart: Chart, toolTip: ChartToolTipOptions, entries: Array<{ dataPoint: ChartDataPoint, dataSeries: ChartDataSeriesOptions }> }): string;
/**
* Sets the background color of toolTip. Values can be “HTML Color Name” or “hex” code.
* Default: white
* Example: “red”, “#FF0000” ..
*/
backgroundColor?: string;
}
interface ChartToolTip extends ChartToolTipOptions {
/**
* Returns the specified property of legend.
* @param propertyName Name of the property.
*/
get(propertyName: string): number | string | boolean;
/**
* Sets the specified property of legend.
* @param propertyName Name of the property.
* @param value Name of the property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: number | string | boolean, updateChart?: boolean): void;
}
interface ChartDataCommon {
/**
* Sets the dataPoint Name. dataPoint name is shown in various places like toolTip & legend unless overridden.
* Default: Automatically Named ("dataPoint 1", "dataPoint 2" .. )
* Example: "apple", "mango" ..
*/
name?: string;
/**
* Sets the color of dataSeries. The value of tickColor can be a "HTML Color Name" or "Hex Code".
* Default: Automatically set from Theme.
* Example: "red", "green" ..
*/
color?: string;
/**
* Enables or Disables highlighting of dataPoints on mouse hover.
* Default: true
* Example: true,false
*/
highlightEnabled?: boolean;
/**
* Instead of setting string values for all indexLabels, you can also use keywords like x, y, etc that will automatically show corresponding properties as indexLabel.
* This will allow you to define indexLabel at the series level once. While setting indexLabel you specify a keyword by enclosing it in flower brackets like {x}, {y}, {color}, etc.
* Range Charts have two indexLabels – one for each y value. This requires the use of a special keyword #index to show index label on either sides of the column/bar/area.
* eg: indexLabel: "{x}: {y[#index]}"
* Important keywords to keep in mind are. {x}, {y}, {name}, {label}.
* Default: null
* Example: "{label}", "Win", "x: {x}, y: {y} "
*/
indexLabel?: string;
/**
* Sets the Dash Type for indexLabel’s line. It is applicable only for pie and doughnut charts when indexLabelPlacement is set to “outside”.
* For other chart-types, indexLabelLineThickness should be set greater than zero.
* Default: solid
*/
indexLabelLineDashType?: DashType;
/**
* A custom formatter function which returns the text to be displayed as indexLabel on dataPoints.
* @param e event object
*/
indexLabelFormatter?(e: { chart: Chart, dataSeries: ChartDataSeriesOptions, dataPoint: ChartDataPoint, index?: number, total?: number, pencent?: number }): string;
/**
* Using this property you can define whether to render indexLabel "inside" or "outside" the dataPoint.
* Default: "outside"
* Example: "outside", "inside"
*/
indexLabelPlacement?: string;
/**
* Sets the Orientation of indexLabel to "horizontal" or "vertical".
* Default: "horizontal"
* Options: "horizontal", "vertical"
*/
indexLabelOrientation?: string;
/**
* Sets the Background color of Index Labels. The value of indexLabelBackgroundColor can be a "HTML Color Name" or "Hex Code".
* Default: null
* Example: "red", "#FAC003" ..
*/
indexLabelBackgroundColor?: string;
/**
* Sets the Index Label’s Font Style. It can be set to one of the below options.
* Default: "normal"
* Options: "italic", "oblique", "normal"
*/
indexLabelFontStyle?: string;
/**
* Sets the Index Label’s Font color. The value of IndexLabelFontColor can be a "HTML Color Name" or "Hex Code".
* Default: "grey"
* Example: "red", "#FAC003" ..
*/
indexLabelFontColor?: string;
/**
* Sets the Index Label’s Font Size in pixels.
* Default: 18
* Example: 12, 16, 22..
*/
indexLabelFontSize?: number;
/**
* Sets the Index Label’s Font Family.
* Default: "Calibri, Optima, Candara, Verdana, Geneva, sans-serif"
* Example: "calibri", "tahoma", "verdana"..
*/
indexLabelFontFamily?: string;
/**
* Sets the Index Label’s Font Weight. It can be set to one of the below options.
* Default: "normal"
* Example: "lighter", "normal" ,"bold" , "bolder"
*/
indexLabelFontWeight?: string;
/**
* Sets the color of line connecting index labels with their dataPoint. It is only applicable for pie and doughnut chart when indexLabelPlacment is outside.
* The value of indexLineColor can be a "HTML Color Name" or "Hex Code".
* Default: "lightgrey"
* Example: "red", "#FAC003" ..
*/
indexLabelLineColor?: string;
/**
* Sets the thickness of line connecting indexLabel with its corresponding dataPoint.
* It is only applicable for pie and doughnut chart when indexLabelPlacement is set to "outside".
* Default: 2
* Example: 4, 6
*/
indexLabelLineThickness?: number;
/**
* Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent.
* toolTipContent set at dataPoint will override toolTipContent set at dataSeries level.
* Default: auto set depending on chart type.
*/
toolTipContent?: string;
/**
* Sets marker type to be rendered at each dataPoint. While markers are helpful in highlighting individual dataPoints, they do not help much when the dataPoints are crowded.
* In case of large number of dataPoints it is recommended to disable markers in order to improve the appearance and performance of chart.
* Same marker type is also used in legend unless overridden by legendMarkerType property.
* Default: "circle"
* Options: "none", "circle", "square", "triangle" and "cross"
*/
markerType?: string;
/**
* Sets the color of marker that is displayed on the Chart. Legend Marker for the series uses the same Color as set here unless overridden using legendMarkerColor property.
* Default: dataSeries Color
* Example: "red", "#008000" ..
*/
markerColor?: string;
/**
* Sets the Size of the marker that is drawn. To display marker in area Chart, set markerSize to a value greater than zero.
* For line, scatter chart, size it is automatically set unless overridden.
* Default: auto. Zero for area chart
* Example: 5, 10..
*/
markerSize?: number;
/**
* Sets the border color around marker. Value of markerBorderColor can be "HTML Color Name" or "hex code".
* Default: dataSeries color.
* Example: "red", "#008000" ..
*/
markerBorderColor?: string;
/**
* Sets the thickness of the Marker’s Border in pixels.
* Default: 1
* Example: 2,4 ..
*/
markerBorderThickness?: number;
/**
* Sets the text that describes the dataSeries in legend.
* Default: "DataSeries 1", "DataSeries 2" ..etc
* Example: "2010", "2011"..
*/
legendText?: string;
/**
* Sets the Legend Marker to one of the options below. This property is used to override the default marker in legend, which is same as dataSeries Marker Type.
* Default: same as markerType
* Options: "circle", "square", "cross" and "triangle"
*/
legendMarkerType?: string;
/**
* Sets the color of marker that is displayed on legend. This property overrides default Marker’s Color in Legend, which is same as dataSeries Marker Color.
* Value of legendMarkerColor can be "HTML Color Name" or "hex code".
* Default: dataSeries marker color
* Example: "red", "#008000" ..
*/
legendMarkerColor?: string;
/**
* Sets the border color around the legend marker. Value of legendMarkerBorderColor can be “color names” or “hex code”.
* Default: dataSeries color.
* Example: “red”, “#008000” ..
*/
legendMarkerBorderColor?: string;
/**
* Sets the thickness of the legend’s Marker Border in pixels.
* Default: 0
* Example: 2, 4 ..
*/
legendMarkerBorderThickness?: number;
/**
* Sets the click event handler for dataSeries which is triggered when user clicks on a dataSeries.
* Upon event, a parameter that contains event related data is sent to the assigned event handler.
* Parameter includes dataPoint and dataSeries corresponding to the event.
* Default: null
*/
click?(event: ChartEvent): void;
/**
* Sets the mouseover event handler for dataSeries which is triggered when user moves Mouse Over a dataSeries.
* Upon event, a parameter that contains event related data is sent to the assigned event handler.
* Parameter includes dataPoint and dataSeries corresponding to the event.
* Default: null
*/
mouseover?(event: ChartEvent): void;
/**
* Sets the mousemove event handler for dataSeries which is triggered when user Moves mouse on a dataSeries.
* Upon event, a parameter that contains event related data is sent to the assigned event handler.
* Parameter includes dataPoint and dataSeries corresponding to the event.
* Default: null
*/
mousemove?(event: ChartEvent): void;
/**
* Sets the mouseout event handler for dataSeries which is triggered when user moves mouse out of a dataSeries.
* Upon event, a parameter that contains event related data is sent to the assigned event handler.
* Parameter includes dataPoint and dataSeries corresponding to the event.
* Default: null
*/
mouseout?(event: ChartEvent): void;
}
interface ChartDataSeriesOptions extends ChartDataCommon {
/**
* Sets the visibility of dataSeries. Data Series is visible by default and you can hide the same by setting visible property to false.
* Default: true
* Example: true, false
*/
visible?: boolean;
/**
* Sets the type of chart to be rendered for corresponding dataSeries. One can choose from the following options.
* Default: "column"
* Options:
* "line"
* "column"
* "bar"
* "area"
* "spline"
* "splineArea"
* "stepLine"
* "scatter"
* "bubble"
* "stackedColumn"
* "stackedBar"
* "stackedArea"
* "stackedColumn100"
* "stackedBar100"
* "stackedArea100"
* "pie"
* "doughnut"
*/
type?: string;
/**
* Setting axisXType lets you choose between primary and secondary X Axis for a dataSeries to plot against. By choosing “secondary” Axis you can plot the series against axisX2.
* In case of Multi-Series or Combinational Charts, one can assign primary axis to some series and secondary axis to other series.
* This is helpful when dataSeries objects use different unit of measurement or range of data. By default, all series are plotted against primary X axis.
*/
axisXType?: string;
/**
* Setting axisYType lets you choose between primary and secondary Y Axis for a dataSeries to plot against. By choosing "secondary" Axis you can plot the series against axisY2.
* In case of Multi-Series or Combinational Charts, one can assign primary axis to some series and secondary axis to other series.
* This is helpful when dataSeries objects use different unit of measurement or range of data. By default, all series are plotted against primary Y axis.
* Default: "primary"
* Options: "primary", "secondary"
*/
axisYType?: string;
/**
* Setting axisXIndex lets you choose to which X axis the dataSeries should be attached.
* In case of Multi-Series or Combinational Charts, one can assign some series to first X axis and rest to another axis.
* This is helpful when dataSeries objects use different unit of measurement or range of data. By default, all series are plotted against first axis.
*/
axisXIndex?: number;
/**
* Setting axisYIndex lets you choose to which Y axis the dataSeries should be attached to.
* In case of Multi-Series or Combinational Charts, one can assign some series to first Y axis and rest to another axis.
* This is helpful when dataSeries objects use different unit of measurement or range of data. By default, all series are plotted against first axis.
*/
axisYIndex?: number;
/**
* This defines the data type of x values. Data Type is normally figured out by default based on the object type that is assigned to x.
* But if you are providing time stamp (which is integer) values instead of Date objects, you’ll have to explicitly set the xValueType to "dateTime".
* Default: Automatically Calculated
* Options: "number", "dateTime"
*/
xValueType?: string;
/**
* Defines how y axis values must be formatted before they appear on the indexLabel or toolTip. You can format numbers and date time values using this property.
*/
yValueFormatString?: string;
/**
* Defines how x axis values must be formatted before they appear on the indexLabel or toolTip. You can format numbers and date time values using this property.
*/
xValueFormatString?: string;
/**
* Defines how z values is formatted before they appear on the indexLabel or toolTip. You can format numbers using this property.
*/
zValueFormatString?: string;
/**
* Defines how percent values are formatted before they appear on the indexLabel or toolTip. You can format percent values using this property.
*/
percentFormatString?: string;
/**
* Sets the bevel property, which creates a chiselled effect at the corners of a Column Charts and Bar Charts.
* Default: "true"
* Example: "true", "false"
*/
bevelEnabled?: boolean;
/**
* Sets opacity of the filled color.
* Default: .7 for Area Charts and 1 for all other chart types.
*/
fillOpacity?: number;
/**
* Sets the starting Angle of the Pie or Doughnut Chart in degrees.
* Default: 0
* Example: 30, 240, -100..
*/
startAngle?: number;
/**
* innerRadius property allows you to set a Doughnut chart’s inner radius.
* Value can either be in pixels (number – ex: 100) or percent (string – ex: “80%”). Percent values are relative to the outer radius of doughnut chart.
* Default: “70%”
* Example: 200, 150, “90%”, “75%”
*/
innerRadius?: number | string;
/**
* radius property allows you to set the Pie/Doughnut chart’s (outer) radius.
* Value can either be in pixels (number – ex: 100) or percent (string – ex: “80%”). Percent values are relative to the plot area’s size.
* By default, a pie/doughnut chart’s size(radius) changes in order to best fit the indexLabels. This can lead to charts of different sizes in the same page.
* In order to override this behavior and set equal sizes to all pie/doughnut charts in a page, you can use radius property.
* Default: Automatically calculate in order to best fit the indexLabels.
* Example: 200, 150, “90%”, “75%”
*/
radius?: number | string;
/**
* Sets the thickness of line in line charts and area charts.
* Default: 2
* Example: 3,4..
*/
lineThickness?: number;
/**
* Setting this property to true makes the dataSeries to appear in legend. In case of pie/ doughnut chart, dataPoints of the single series chart appear in legend.
* Default: false
* Options: false, true
*/
showInLegend?: boolean;
/**
* Enables or disables exploding of Pie/Doughnut segment on click.
* Default: true
* Options: false, true
*/
explodeOnClick?: boolean;
/**
* In candle Stick chart, when Closing Price is greater than Opening price, the body is filled with white by default and it can be overridden by risingColor property.
* Default: "white"
* Options: "red", "#DD7E86", etc.
*/
risingColor?: string;
/**
* It represents collection dataPoint inside dataSeries.
*/
dataPoints: ChartDataPoint[];
/**
* By default, a line breaks wherever a null dataPoint (y = null) is present.
* You can change this behaviour to draw a line between adjacent non-null dataPoints by setting connectNullData to true.
* Default: false
* Example: true, false
*/
connectNullData?: boolean;
/**
* Sets the Line Dash Type for all Line and Area Charts.
* Default: solid
*/
lineDashType?: DashType;
/**
* Sets the Line Dash Type of line wherever null data is present.
* Note:
* 1.Will effect only if connectNullData is set to true.
* 2.Supported with all Line and Area Charts.
* 3.Not Supported on IE8.
* Default: "dash"
*/
nullDataLineDashType?: DashType;
}
interface ChartDataSeries extends ChartDataSeriesOptions {
/**
* Returns the specified property of dataSeries
* @param propertyName Name of the property.
*/
get(propertyName: string): boolean | string | number | ChartDataPoint;
/**
* Sets the specified property of dataSeries.
* @param propertyName Name of the property.
* @param value value to be set on property.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
set(propertyName: string, value: boolean | string | number | ChartDataPoint, updateChart: boolean): void;
/**
* Adds a new element of given type to the specified array. For example, it can be used to add new dataPoint to datPoints array.
* @param propertyName Name of the property
* @param options Option for the new element
* @param index Index of the array where the new element is to be added. Defaults to the length (end) of array.
* @param updateChart When true, Updates the chart automatically after setting the value. Defaults to true.
*/
addTo(propertyName: string, options: ChartDataPoint, index?: number, updateChart?: boolean): void;
/**
* Removes specified dataSeries from data Array.
*/
remove(): void;
}
interface ChartDataPoint extends ChartDataCommon {
/**
* Sets the x value. It determines the position of the dataPoint on X Axis. It can be numeric or a dateTime value. Values can be positive or Negative.
* If no x value is provided, they are automatically set sequentially starting from zero
* Default: null
* Example: 10, 20, 30 ..
* new Date(2011, 08, 01)
*/
x?: number | Date;
/**
* Sets the y value of dataPoint. It determines the position of dataPoint on Y Axis. Values can be positive or Negative
* Default: null
* Example: 5, 20, -30 ..
*/
y?: number | null;
/**
* Sets the z value of dataPoint. It is only applicable in case of Bubble chart. This value determines the size of the bubble.
* Default: 1
* Example: 10, 20, 35..
*/
z?: number;
/**
* Sets label value of a dataPoint. The value appears next to the dataPoint on axisX Line. If not provided, it takes x value for label.
* Default: x value
* Example: "label1", "label2"..
*/
label?: string;
/**
* Sets the exploded value of dataPoint. It is applicable only in case of Pie and Doughnut Charts. This property causes the Pie/Doughnut slice to separate out.
* Default: true
* Example: true, false
*/
exploded?: boolean;
}
}
declare function CanvasJS(): void;
export = CanvasJS;
export as namespace CanvasJS;
Reference in New Issue View Git Blame Copy Permalink