Example about animation
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animation: 'none',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

animationDurationnumber

Determines the animation duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range smartChart will reset it to the default value.

Default value

300

Example about animationDuration
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animationDuration: 500,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

backgroundColorstring | null

Sets the chart's background color. For example: '#DDFFE8'

Example about backgroundColor
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	backgroundColor: '#DDFFE8',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

backgroundImagestring

Sets the chart's background image. For example: 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg'

Default value

Example about backgroundImage
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	backgroundImage: 'chart_background.png',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

borderLineColorstring | null

Sets the chart's border color. For example: '#098700'

Example about borderLineColor
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	borderLineColor: '#098700',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

borderLineWidthnumber

Sets the chart's border line width.

Default value

Example about borderLineWidth
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	borderLineWidth: 2,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

captionstring

Sets the caption (title) of the chart.

Default value

"Caption"

clipboolean

Determines whether to clip plotted elements that overflow the axis boundaries.

Default value

true

Example about clip
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	clip: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"

Sets the chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.

Default value

"scheme01"

Example about colorScheme
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	colorScheme: 'scheme31',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

columnSeriesOverlapboolean

Enables or disables overlapping of the column series.

Default value

false

Example about columnSeriesOverlap
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	columnSeriesOverlap: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

crosshairsColorstring | null

Gets or sets the color of the crosshairs lines. The 'enableCrosshairs' property should be 'true'.

Example about crosshairsColor
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsColor: '#303030',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length. The 'enableCrosshairs' property should be 'true'. For example: '3,3'

Default value

"2,2"

Example about crosshairsDashStyle
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsDashStyle: '3,3',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

crosshairsLineWidthnumber

Gets or sets the width of the crosshairs lines. The 'enableCrosshairs' property should be 'true'

Default value

Example about crosshairsLineWidth
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsLineWidth: 2,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

dataSource[]

Sets the chart's data source.

Example about dataSource
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

descriptionstring

Sets the description text of the chart.

Default value

"Description"

disabledboolean

Enables or disables the chart.

Default value

false

Example about disabled
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	disabled: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

drawfunction | null

Determines the drawing function of smartChart. When the property is set, you can override the smartChart's drawing.

Example about draw
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	draw: draw: function (renderer, rect) {
                renderer.path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z', { fill: '#564D90', stroke: '#C14B91' });
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

drawBeforefunction | null

Function for custom drawing before the caption and other chart elements.

Example about drawBefore
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	drawBefore: drawBefore: function (renderer, rect) {
                renderer.path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z', { fill: '#564D90', stroke: '#C14B91' });
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

enableAxisTextAnimationboolean

Determines if the animation of the axes text is enabled.

Default value

false

Example about enableAxisTextAnimation
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	enableAxisTextAnimation: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

enableCrosshairsboolean

Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.

Default value

false

Example about enableCrosshairs
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	enableCrosshairs: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

greyScaleboolean

Determines whether to display the chart using greyscale colors.

Default value

false

Example about greyScale
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	greyScale: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

legendLayoutobject | null

Sets the legend's layout.

Example about legendLayout
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	legendLayout: { flow: 'vertical', width: 50, height: 200, left: 600, top: 0 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

localestring

Sets or gets the locale. Used in conjunction with the property messages.

Default value

"en"

Example about locale
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	locale: 'es',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

localizationobject

Localization object containing culture-specific properties required for formatting currencies, numbers and dates.

Properties

decimalSeparator

patterns

thousandsSeparator

decimalSeparatorstring

A symbol used to mark the border between the integer and fractional parts of a number.

Default value

"."

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.localization.decimalSeparator;

patternsobject | null

An object containing datetime formatting patterns.

Get the patterns property.

 const chart = document.querySelector('smart-chart');

 let patterns = chart.localization.patterns;

thousandsSeparatorstring

A symbol used to mark the border between thousands, millions, billions, etc.

Default value

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.localization.thousandsSeparator;

Example about localization
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	localization: { decimalSeparator: ',', thousandsSeparator: ' ' },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

Example about messages
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	messages: {
                'es': {
                    'invalidRadiusDataField': 'smart-chart: Valor de radiusDataField no valido en [{{index}}]',
                    'invalidSeries': 'smart-chart: Propiedad no valida: cada grupo de series debe tener una propiedad 'series' que debe ser una Array valida.',
                    'invalidSeriesGroups': 'smart-chart: Propiedad no valida: la propiedad 'seriesGroups' es obligatoria y debe ser una Array valida.',
                    'invalidType': 'smart-chart: Tipo de serie no valido "{{type}}".',
                    'missingAxis': 'smart-chart: seriesGroup[{{index}}] le falta a la definicion de {{axis}}.',
                    'missingReference': 'smart-chart: Falta la referencia a {{files}}.',
                    'missingType': 'smart-chart: Propiedad no valida: cada grupo de series debe tener una propiedad 'type' valida.'
                }
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

paddingobject

Sets the left, top, right and bottom padding of the Chart.

Properties

bottomnumber

Bottom padding of the Chart.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.padding.bottom;

leftnumber

Left padding of the Chart.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.padding.left;

rightnumber

Right padding of the Chart.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.padding.right;

topnumber

Top padding of the Chart.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.padding.top;

Example about padding
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	padding: { left: 10, top: 10, right: 10, bottom: 10 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

renderEngine"" | "SVG" | "HTML5"

Determines the rendering engine used to display the chart. When the property is set to an empty string, smartChart will automatically select an optimal rendering engine depending on the browser capabilities.

Default value

Example about renderEngine
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	renderEngine: 'HTML5',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

rightToLeftboolean

Sets or gets a value indicating whether the Chart's layout is mirrored.

Default value

false

Example about rightToLeft
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	rightToLeft: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

seriesGroups[]

The seriesGroups property is used to describe all series displayed on the chart. smartChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns. seriesGroups is an array of objects where each object represents one group.

annotations[]

An array of chart annotation objects.

Properties

fillColorstring | null

Fill/background color of the annotation.

Get the fillColor property.

 const chart = document.querySelector('smart-chart');

 let fillColor = chart.seriesGroups[0].annotations[0].fillColor;

heightnumber

Height of the annotation.

Get the height property.

 const chart = document.querySelector('smart-chart');

 let height = chart.seriesGroups[0].annotations[0].height;

lineColorstring | null

Line color of the annotation.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].annotations[0].lineColor;

offsetobject

Custom offset of the annotation relative to xValue & yValue.

Properties

xnumber | null

Horizontal offset.

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].annotations[0].offset.x;

ynumber | null

Vertical offset.

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].annotations[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].annotations[0].offset;

pathstring | null

Line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.

Get the path property.

 const chart = document.querySelector('smart-chart');

 let path = chart.seriesGroups[0].annotations[0].path;

radiusnumber

Radius of the annotation in case its type is 'circle'.

Get the radius property.

 const chart = document.querySelector('smart-chart');

 let radius = chart.seriesGroups[0].annotations[0].radius;

textobject

Object describing the text of the annotation.

Properties

anglenumber

Text rotation angle.

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].annotations[0].text.angle;

classstring | null

CSS class of the annotation.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].annotations[0].text.class;

fillColorstring | null

Inner text color (fill).

Get the fillColor property.

 const chart = document.querySelector('smart-chart');

 let fillColor = chart.seriesGroups[0].annotations[0].text.fillColor;

horizontalAlignment"center" | "left" | "right"

Horizontal text alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].annotations[0].text.horizontalAlignment;

lineColorstring | null

Outer text color (stroke).

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].annotations[0].text.lineColor;

offsetobject

Offset of the annotation text relative to the base annotation offset.

Properties

xnumber

Horizontal offset.

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].annotations[0].text.offset.x;

ynumber

Vertical offset.

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].annotations[0].text.offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].annotations[0].text.offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"centermiddle"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].annotations[0].text.rotationPoint;

valuestring | null

Text of the annotation.

Get the value property.

 const chart = document.querySelector('smart-chart');

 let value = chart.seriesGroups[0].annotations[0].text.value;

verticalAlignment"center" | "top" | "bottom"

Vertical text alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].annotations[0].text.verticalAlignment;

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.seriesGroups[0].annotations[0].text;

type"text" | "rect" | "circle" | "line" | "path" | "null"

Shape type of the annotation.

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.seriesGroups[0].annotations[0].type;

widthnumber

Width of the annotation.

Get the width property.

 const chart = document.querySelector('smart-chart');

 let width = chart.seriesGroups[0].annotations[0].width;

xValuenumber

Value to determine the horizontal offset of the annotation.

Get the xValue property.

 const chart = document.querySelector('smart-chart');

 let xValue = chart.seriesGroups[0].annotations[0].xValue;

xValue2number

Optional 2nd value to determine the horizontal offset of the annotation bottom-right point.

Get the xValue2 property.

 const chart = document.querySelector('smart-chart');

 let xValue2 = chart.seriesGroups[0].annotations[0].xValue2;

yValuenumber

Value to determine the vertical offset of the annotation.

Get the yValue property.

 const chart = document.querySelector('smart-chart');

 let yValue = chart.seriesGroups[0].annotations[0].yValue;

yValue2number

Optional 2nd value to determine the vertical offset of the annotation's bottom-right point.

Get the yValue2 property.

 const chart = document.querySelector('smart-chart');

 let yValue2 = chart.seriesGroups[0].annotations[0].yValue2;

Get the annotations property.

 const chart = document.querySelector('smart-chart');

 let annotations = chart.seriesGroups[0].annotations;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].bands[0].lineColor;

lineWidthstring | number | null

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.seriesGroups[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.seriesGroups[0].bands;

columnsGapPercentnumber

Percentage gap between columns within the same serie.

Default value

Get the columnsGapPercent property.

 const chart = document.querySelector('smart-chart');

 let columnsGapPercent = chart.seriesGroups[0].columnsGapPercent;

columnsMaxWidthnumber | null

Maximum width of columns in column series.

Get the columnsMaxWidth property.

 const chart = document.querySelector('smart-chart');

 let columnsMaxWidth = chart.seriesGroups[0].columnsMaxWidth;

columnsMinWidthnumber

Minimum width of columns in column series.

Default value

Get the columnsMinWidth property.

 const chart = document.querySelector('smart-chart');

 let columnsMinWidth = chart.seriesGroups[0].columnsMinWidth;

columnsBottomWidthPercentnumber

Columns bottom width (as percentage of the total width).

Default value

100

Get the columnsBottomWidthPercent property.

 const chart = document.querySelector('smart-chart');

 let columnsBottomWidthPercent = chart.seriesGroups[0].columnsBottomWidthPercent;

columnsTopWidthPercentnumber

Columns top width (as percentage of the total width).

Default value

100

Get the columnsTopWidthPercent property.

 const chart = document.querySelector('smart-chart');

 let columnsTopWidthPercent = chart.seriesGroups[0].columnsTopWidthPercent;

drawfunction | null

Determines the drawing function of the series group. When the property is set, you can draw after the series group has been plotted.

Get the draw property.

 const chart = document.querySelector('smart-chart');

 let draw = chart.seriesGroups[0].draw;

dataSourceany

Determines the data source of the serie

Get the dataSource property.

 const chart = document.querySelector('smart-chart');

 let dataSource = chart.seriesGroups[0].dataSource;

drawBeforefunction | null

Function for custom drawing before the series group.

Get the drawBefore property.

 const chart = document.querySelector('smart-chart');

 let drawBefore = chart.seriesGroups[0].drawBefore;

enableSelectionboolean

Determines whether series are selectable.

Default value

true

Get the enableSelection property.

 const chart = document.querySelector('smart-chart');

 let enableSelection = chart.seriesGroups[0].enableSelection;

enableSeriesToggleboolean

Determines whether to toggle series visibility after click on a legend's box.

Default value

true

Get the enableSeriesToggle property.

 const chart = document.querySelector('smart-chart');

 let enableSeriesToggle = chart.seriesGroups[0].enableSeriesToggle;

endAnglenumber

The end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.

Default value

360

Get the endAngle property.

 const chart = document.querySelector('smart-chart');

 let endAngle = chart.seriesGroups[0].endAngle;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format series labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].formatFunction;

formatSettingsobject

Object describing the format settings of series labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].formatSettings;

linesUnselectMode"click" | "default"

Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.

Default value

"default"

Get the linesUnselectMode property.

 const chart = document.querySelector('smart-chart');

 let linesUnselectMode = chart.seriesGroups[0].linesUnselectMode;

offsetXnumber

Horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.

Get the offsetX property.

 const chart = document.querySelector('smart-chart');

 let offsetX = chart.seriesGroups[0].offsetX;

offsetYnumber

Vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.

Get the offsetY property.

 const chart = document.querySelector('smart-chart');

 let offsetY = chart.seriesGroups[0].offsetY;

orientation"vertical" | "horizontal"

Specifies the orientation of the series group.

Default value

"vertical"

Get the orientation property.

 const chart = document.querySelector('smart-chart');

 let orientation = chart.seriesGroups[0].orientation;

summarystring

Specifies the summary of the series group.

Default value

Get the summary property.

 const chart = document.querySelector('smart-chart');

 let summary = chart.seriesGroups[0].summary;

polarboolean

When polar is set to true, the chart will render in polar coordinates.

Default value

false

Get the polar property.

 const chart = document.querySelector('smart-chart');

 let polar = chart.seriesGroups[0].polar;

radiusnumber

The radius of the polar coordinate system. Applicable to polar and spider charts only.

Get the radius property.

 const chart = document.querySelector('smart-chart');

 let radius = chart.seriesGroups[0].radius;

series[]

An array of chart series.

centerOffsetnumber

Offset from the center point in a pie/donut series.

Default value

Get the centerOffset property.

 const chart = document.querySelector('smart-chart');

 let centerOffset = chart.seriesGroups[0].series[0].centerOffset;

colorFunctionfunction | null

A custom function that returns the color of a data point. The function will receive the following parameters: dataValue, itemIndex, serie, group. The implementation of the function can return a single color which will be used as a fillColor and the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.

Get the colorFunction property.

 const chart = document.querySelector('smart-chart');

 let colorFunction = chart.seriesGroups[0].series[0].colorFunction;

colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"

Color palette to use when rendering the serie.

Default value

scheme01

Get the colorScheme property.

 const chart = document.querySelector('smart-chart');

 let colorScheme = chart.seriesGroups[0].series[0].colorScheme;

dataFieldstring

Name of the field in the data source.

Default value

"null"

Get the dataField property.

 const chart = document.querySelector('smart-chart');

 let dataField = chart.seriesGroups[0].series[0].dataField;

dataFieldClosestring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldClose property.

 const chart = document.querySelector('smart-chart');

 let dataFieldClose = chart.seriesGroups[0].series[0].dataFieldClose;

dataFieldHighstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldHigh property.

 const chart = document.querySelector('smart-chart');

 let dataFieldHigh = chart.seriesGroups[0].series[0].dataFieldHigh;

dataFieldLowstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldLow property.

 const chart = document.querySelector('smart-chart');

 let dataFieldLow = chart.seriesGroups[0].series[0].dataFieldLow;

dataFieldOpenstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldOpen property.

 const chart = document.querySelector('smart-chart');

 let dataFieldOpen = chart.seriesGroups[0].series[0].dataFieldOpen;

dataFieldFromstring

Data field used in in range column series as a start data field.

Default value

"null"

Get the dataFieldFrom property.

 const chart = document.querySelector('smart-chart');

 let dataFieldFrom = chart.seriesGroups[0].series[0].dataFieldFrom;

dataFieldTostring

Data field used in range column series as an end data field.

Default value

"null"

Get the dataFieldTo property.

 const chart = document.querySelector('smart-chart');

 let dataFieldTo = chart.seriesGroups[0].series[0].dataFieldTo;

radiusDataFieldstring

Data field used in bubble series.

Default value

"null"

Get the radiusDataField property.

 const chart = document.querySelector('smart-chart');

 let radiusDataField = chart.seriesGroups[0].series[0].radiusDataField;

displayTextstring

Name to display for this serie.

Default value

"null"

Get the displayText property.

 const chart = document.querySelector('smart-chart');

 let displayText = chart.seriesGroups[0].series[0].displayText;

displayTextClosestring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextClose property.

 const chart = document.querySelector('smart-chart');

 let displayTextClose = chart.seriesGroups[0].series[0].displayTextClose;

displayTextHighstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextHigh property.

 const chart = document.querySelector('smart-chart');

 let displayTextHigh = chart.seriesGroups[0].series[0].displayTextHigh;

displayTextLowstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextLow property.

 const chart = document.querySelector('smart-chart');

 let displayTextLow = chart.seriesGroups[0].series[0].displayTextLow;

displayTextOpenstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextOpen property.

 const chart = document.querySelector('smart-chart');

 let displayTextOpen = chart.seriesGroups[0].series[0].displayTextOpen;

emptyPointsDisplay"connect" | "skip" | "zero"

Determines how to display value gaps in line series.

Default value

"skip"

Get the emptyPointsDisplay property.

 const chart = document.querySelector('smart-chart');

 let emptyPointsDisplay = chart.seriesGroups[0].series[0].emptyPointsDisplay;

enableSelectionboolean

Determines whether the serie is selectable.

Default value

true

Get the enableSelection property.

 const chart = document.querySelector('smart-chart');

 let enableSelection = chart.seriesGroups[0].series[0].enableSelection;

enableSeriesToggleboolean

Determines whether to toggle the series visibility after click on a legend's box.

Default value

true

Get the enableSeriesToggle property.

 const chart = document.querySelector('smart-chart');

 let enableSeriesToggle = chart.seriesGroups[0].series[0].enableSeriesToggle;

labelRadiusnumber

Determines the labels rotation radius when the Chart is 'pie' or 'donut'.

Default value

Get the labelRadius property.

 const chart = document.querySelector('smart-chart');

 let labelRadius = chart.seriesGroups[0].series[0].labelRadius;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].series[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].series[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].series[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].series[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].series[0].formatSettings;

summarystring

Specifies the summary of the series group.

Default value

Get the summary property.

 const chart = document.querySelector('smart-chart');

 let summary = chart.seriesGroups[0].series[0].summary;

endAnglenumber

Maximum angle in a pie, donut, polar and spider series.

Default value

360

Get the endAngle property.

 const chart = document.querySelector('smart-chart');

 let endAngle = chart.seriesGroups[0].series[0].endAngle;

fillColorstring | null

Fill color for the serie.

Get the fillColor property.

 const chart = document.querySelector('smart-chart');

 let fillColor = chart.seriesGroups[0].series[0].fillColor;

fillColorAltstring | null

Alternating fill color for the serie. Applicable to OHLC series only.

Get the fillColorAlt property.

 const chart = document.querySelector('smart-chart');

 let fillColorAlt = chart.seriesGroups[0].series[0].fillColorAlt;

fillColorAltSelectedstring | null

Alternating fill color for the serie when selected. Applicable to OHLC series only.

Get the fillColorAltSelected property.

 const chart = document.querySelector('smart-chart');

 let fillColorAltSelected = chart.seriesGroups[0].series[0].fillColorAltSelected;

fillColorSelectedstring | null

Fill color for the serie when selected.

Get the fillColorSelected property.

 const chart = document.querySelector('smart-chart');

 let fillColorSelected = chart.seriesGroups[0].series[0].fillColorSelected;

fillColorSymbolstring | null

Fill color for the marker symbols in the serie.

Get the fillColorSymbol property.

 const chart = document.querySelector('smart-chart');

 let fillColorSymbol = chart.seriesGroups[0].series[0].fillColorSymbol;

fillColorSymbolSelectedstring | null

Fill color for the the marker symbols in serie when selected.

Get the fillColorSymbolSelected property.

 const chart = document.querySelector('smart-chart');

 let fillColorSymbolSelected = chart.seriesGroups[0].series[0].fillColorSymbolSelected;

greyScaleboolean | null

Determines whether to display the serie in grey scale.

Default value

false

Get the greyScale property.

 const chart = document.querySelector('smart-chart');

 let greyScale = chart.seriesGroups[0].series[0].greyScale;

hiddenPointsDisplayboolean

Determines whether to hide slices of toggled points in pie and donut series.

Default value

false

Get the hiddenPointsDisplay property.

 const chart = document.querySelector('smart-chart');

 let hiddenPointsDisplay = chart.seriesGroups[0].series[0].hiddenPointsDisplay;

initialAnglenumber

Initial angle in pie and donut series.

Default value

Get the initialAngle property.

 const chart = document.querySelector('smart-chart');

 let initialAngle = chart.seriesGroups[0].series[0].initialAngle;

innerRadiusnumber

Inner radius of donut series in pixels or percents.

Default value

Get the innerRadius property.

 const chart = document.querySelector('smart-chart');

 let innerRadius = chart.seriesGroups[0].series[0].innerRadius;

labelsobject

Object describing the labels properties of the axis.

Default value

null

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].series[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.seriesGroups[0].series[0].autoRotate;

backgroundColorstring | null

Labels background color.

Get the backgroundColor property.

 const chart = document.querySelector('smart-chart');

 let backgroundColor = chart.seriesGroups[0].series[0].backgroundColor;

backgroundOpacitynumber | null

Labels background opacity.

Default value

Get the backgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let backgroundOpacity = chart.seriesGroups[0].series[0].backgroundOpacity;

borderColorstring | null

Labels border line color.

Get the borderColor property.

 const chart = document.querySelector('smart-chart');

 let borderColor = chart.seriesGroups[0].series[0].borderColor;

borderOpacitynumber | null

Labels border line opacity.

Default value

Get the borderOpacity property.

 const chart = document.querySelector('smart-chart');

 let borderOpacity = chart.seriesGroups[0].series[0].borderOpacity;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].series[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].series[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].series[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].series[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].series[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].series[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].series[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].series[0].horizontalAlignment;

linesAnglesboolean

Determines whether to use direct lines for the labels in pie/donut series.

Default value

true

Get the linesAngles property.

 const chart = document.querySelector('smart-chart');

 let linesAngles = chart.seriesGroups[0].series[0].linesAngles;

linesEnabledboolean

Determines whether to use lines for the labels in pie/donut series.

Default value

true

Get the linesEnabled property.

 const chart = document.querySelector('smart-chart');

 let linesEnabled = chart.seriesGroups[0].series[0].linesEnabled;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].series[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].series[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].series[0].offset;

paddingobject

Object describing the padding of the labels.

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].series[0].padding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].series[0].padding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].series[0].padding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].series[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.seriesGroups[0].series[0].padding;

radiusnumber | null

Radius of the labels in pie/donut series.

Get the radius property.

 const chart = document.querySelector('smart-chart');

 let radius = chart.seriesGroups[0].series[0].radius;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].series[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].series[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].series[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].series[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].series[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.seriesGroups[0].series[0].labels[0].labels;

legendFillColorstring | null

Fill color of the legend box. The default value is inherited from the serie's color.

Get the legendFillColor property.

 const chart = document.querySelector('smart-chart');

 let legendFillColor = chart.seriesGroups[0].series[0].labels[0].legendFillColor;

legendFormatFunctionfunction | null

Legend data formatting function for the values in the serie.

Get the legendFormatFunction property.

 const chart = document.querySelector('smart-chart');

 let legendFormatFunction = chart.seriesGroups[0].series[0].labels[0].legendFormatFunction;

legendFormatSettingsobject

Legend data formatting settings for the values in the serie.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].thousandsSeparator;

Get the legendFormatSettings property.

 const chart = document.querySelector('smart-chart');

 let legendFormatSettings = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings;

legendLineColorstring | null

Line color of the legend box. The default value is inherited from the serie's color.

Get the legendLineColor property.

 const chart = document.querySelector('smart-chart');

 let legendLineColor = chart.seriesGroups[0].series[0].labels[0].legendLineColor;

lineColorstring | null

Line color for the serie.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].series[0].labels[0].lineColor;

lineColorSelectedstring | null

Line color for the serie when selected.

Get the lineColorSelected property.

 const chart = document.querySelector('smart-chart');

 let lineColorSelected = chart.seriesGroups[0].series[0].labels[0].lineColorSelected;

lineColorSymbolstring | null

Line color for the marker symbols in serie.

Get the lineColorSymbol property.

 const chart = document.querySelector('smart-chart');

 let lineColorSymbol = chart.seriesGroups[0].series[0].labels[0].lineColorSymbol;

lineColorSymbolSelectedstring | null

Line color for the marker symbols in the serie when selected.

Get the lineColorSymbolSelected property.

 const chart = document.querySelector('smart-chart');

 let lineColorSymbolSelected = chart.seriesGroups[0].series[0].labels[0].lineColorSymbolSelected;

lineDashStylestring | null

A string sequence of numbers represening line and space lengths, e.g. '2,2'.

Get the lineDashStyle property.

 const chart = document.querySelector('smart-chart');

 let lineDashStyle = chart.seriesGroups[0].series[0].labels[0].lineDashStyle;

linesUnselectMode"click" | "default"

Default value

"default"

Get the linesUnselectMode property.

 const chart = document.querySelector('smart-chart');

 let linesUnselectMode = chart.seriesGroups[0].series[0].labels[0].linesUnselectMode;

lineWidthstring | null | number

Determines the line tickness of the items in this serie.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].series[0].labels[0].lineWidth;

lineWidthSelectedstring | null | number

Determines the line tickness of the items in this serie when selected.

Get the lineWidthSelected property.

 const chart = document.querySelector('smart-chart');

 let lineWidthSelected = chart.seriesGroups[0].series[0].labels[0].lineWidthSelected;

minRadiusstring | null | number

Min radius of bubble series in pixels or percents.

Get the minRadius property.

 const chart = document.querySelector('smart-chart');

 let minRadius = chart.seriesGroups[0].series[0].labels[0].minRadius;

maxRadiusstring | null | number

Max radius of bubble series in pixels or percents.

Get the maxRadius property.

 const chart = document.querySelector('smart-chart');

 let maxRadius = chart.seriesGroups[0].series[0].labels[0].maxRadius;

opacitynumber

Determines the opacity of the items in this serie.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.seriesGroups[0].series[0].labels[0].opacity;

radiusnumber | null

Outer radius of pie and donut series in pixels or percents.

Get the radius property.

 const chart = document.querySelector('smart-chart');

 let radius = chart.seriesGroups[0].series[0].labels[0].radius;

selectedRadiusChangenumber | null

Radius change on selection of pie and donut series in pixels or percents.

Get the selectedRadiusChange property.

 const chart = document.querySelector('smart-chart');

 let selectedRadiusChange = chart.seriesGroups[0].series[0].labels[0].selectedRadiusChange;

startAnglenumber

Minimum angle in a pie, donut, polar and spider series.

Default value

Get the startAngle property.

 const chart = document.querySelector('smart-chart');

 let startAngle = chart.seriesGroups[0].series[0].labels[0].startAngle;

symbolSizenumber

Determines the size of the symbol element.

Get the symbolSize property.

 const chart = document.querySelector('smart-chart');

 let symbolSize = chart.seriesGroups[0].series[0].labels[0].symbolSize;

symbolSizeSelectednumber

Determines the size of the symbol element. This property is applicable to line and area series only.

Get the symbolSizeSelected property.

 const chart = document.querySelector('smart-chart');

 let symbolSizeSelected = chart.seriesGroups[0].series[0].labels[0].symbolSizeSelected;

symbolType"none" | "circle" | "square" | "diamond" | "triangle_up" | "triangle_down" | "triangle_left" | "triangle_right"

Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only.

Default value

"none"

Get the symbolType property.

 const chart = document.querySelector('smart-chart');

 let symbolType = chart.seriesGroups[0].series[0].labels[0].symbolType;

toolTipBackgroundstring | null

Determines the tooltip's background.

Get the toolTipBackground property.

 const chart = document.querySelector('smart-chart');

 let toolTipBackground = chart.seriesGroups[0].series[0].labels[0].toolTipBackground;

toolTipClassstring | null

Determines the tooltip's CSS class name.

Get the toolTipClass property.

 const chart = document.querySelector('smart-chart');

 let toolTipClass = chart.seriesGroups[0].series[0].labels[0].toolTipClass;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

Tooltip data formatting function for the values in the serie.

Get the toolTipFormatFunction property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatFunction = chart.seriesGroups[0].series[0].labels[0].toolTipFormatFunction;

toolTipFormatSettingsobject

Tooltip data formatting settings for the values in the serie.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].thousandsSeparator;

Get the toolTipFormatSettings property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatSettings = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings;

toolTipLineColorstring | null

Determines the tooltip's border lines color.

Get the toolTipLineColor property.

 const chart = document.querySelector('smart-chart');

 let toolTipLineColor = chart.seriesGroups[0].series[0].labels[0].toolTipLineColor;

useGradientColorsboolean

Determines whether to use color gradients.

Default value

false

Get the useGradientColors property.

 const chart = document.querySelector('smart-chart');

 let useGradientColors = chart.seriesGroups[0].series[0].labels[0].useGradientColors;

Get the series property.

 const chart = document.querySelector('smart-chart');

 let series = chart.seriesGroups[0].series;

seriesGapPercentnumber

Percentage gap between columns belonging to different series.

Default value

Get the seriesGapPercent property.

 const chart = document.querySelector('smart-chart');

 let seriesGapPercent = chart.seriesGroups[0].seriesGapPercent;

skipOverlappingPointsboolean

Determines whether to display overlapping data points in column, ohlc and candlestick series.

Default value

true

Get the skipOverlappingPoints property.

 const chart = document.querySelector('smart-chart');

 let skipOverlappingPoints = chart.seriesGroups[0].skipOverlappingPoints;

showLabelsboolean

When showLabels is set to true, the chart will render pie labels.

Default value

true

Get the showLabels property.

 const chart = document.querySelector('smart-chart');

 let showLabels = chart.seriesGroups[0].showLabels;

spiderboolean

When spider is set to true, the chart will render in polar coordinates.

Default value

false

Get the spider property.

 const chart = document.querySelector('smart-chart');

 let spider = chart.seriesGroups[0].spider;

startAnglenumber

The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.

Default value

Get the startAngle property.

 const chart = document.querySelector('smart-chart');

 let startAngle = chart.seriesGroups[0].startAngle;

type"column" | "stackedcolumn" | "stackedcolumn100" | "rangecolumn" | "waterfall" | "stackedwaterfall" | "line" | "stackedline" | "stackedline100" | "spline" | "stackedspline" | "stackedspline100" | "stepline" | "stackedstepline" | "stackedstepline100" | "area" | "stackedarea" | "stackedarea100" | "rangearea" | "splinearea" | "stackedsplinearea" | "stackedsplinearea100" | "splinerangearea" | "steprangearea" | "stackedsplineara" | "steparea" | "stackedsteparea" | "stackedsteparea100" | "pie" | "donut" | "scatter" | "stackedscatter" | "stackedscatter100" | "bubble" | "stackedbubble" | "stackedbubble100" | "candlestick" | "ohlc"

Sets the chart type. smartChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, smartChart supports the following series types:

'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points

Default value

column

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.seriesGroups[0].type;

toolTipFormatSettingsobject

Object describing the format settings of series tooltips.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].toolTipFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].toolTipFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].toolTipFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].toolTipFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].toolTipFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].toolTipFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].toolTipFormatSettings[0].thousandsSeparator;

Get the toolTipFormatSettings property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatSettings = chart.seriesGroups[0].toolTipFormatSettings;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

Sets the tooltip format function. The function is used to format the tooltips of the Chart serie

Get the toolTipFormatFunction property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatFunction = chart.seriesGroups[0].toolTipFormatFunction;

useGradientColorsboolean

Determines whether to use color gradients.

Default value

false

Get the useGradientColors property.

 const chart = document.querySelector('smart-chart');

 let useGradientColors = chart.seriesGroups[0].useGradientColors;

valueAxisobject

Object describing the valueAxis for this group. smartChart allows you to use a common valueAxis and/or multiple value axes per serie group.

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the axis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.seriesGroups[0].valueAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].valueAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].valueAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].valueAxis[0].bands[0].lineColor;

lineWidthstring | null | number

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].valueAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].valueAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].valueAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.seriesGroups[0].valueAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.seriesGroups[0].valueAxis[0].bands;

baselineValueany

Sets the baseline value for the axis.

Default value

Get the baselineValue property.

 const chart = document.querySelector('smart-chart');

 let baselineValue = chart.seriesGroups[0].valueAxis[0].baselineValue;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.seriesGroups[0].valueAxis[0].customDraw;

descriptionstring

Sets the description of the value axis.

Default value

Get the description property.

 const chart = document.querySelector('smart-chart');

 let description = chart.seriesGroups[0].valueAxis[0].description;

displayValueAxisboolean

Specifies whether the values axis is displayed.

Default value

true

Get the displayValueAxis property.

 const chart = document.querySelector('smart-chart');

 let displayValueAxis = chart.seriesGroups[0].valueAxis[0].displayValueAxis;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.seriesGroups[0].valueAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].valueAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].valueAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].valueAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].valueAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].valueAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].valueAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].valueAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].valueAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].valueAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the valueAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].valueAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].valueAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].valueAxis[0].gridLines[0].dashStyle;

lineWidthstring | number | null

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].valueAxis[0].gridLines[0].lineWidth;

sizestring | number | null

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.seriesGroups[0].valueAxis[0].gridLines[0].size;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].valueAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].valueAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.seriesGroups[0].valueAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].valueAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.seriesGroups[0].valueAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].valueAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].valueAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].valueAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].valueAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].valueAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].valueAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].valueAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].valueAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].valueAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].valueAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].valueAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.seriesGroups[0].valueAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].valueAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].valueAxis[0].line.dashStyle;

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].valueAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.seriesGroups[0].valueAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.seriesGroups[0].valueAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.seriesGroups[0].valueAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the valueAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].valueAxis[0].maxValue;

minValueany

Sets the minimum value of the valueAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].valueAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal valueAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].valueAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical valueAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].valueAxis[0].padding.left;

rightnumber

Right padding. Available for vertical valueAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].valueAxis[0].padding.right;

topnumber

Top padding. Available for horizontal valueAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].valueAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.seriesGroups[0].valueAxis[0].padding;

position"left" | "right" | "top" | "bottom"

Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.

Default value

"left"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.seriesGroups[0].valueAxis[0].position;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.seriesGroups[0].valueAxis[0].textRotationAngle;

typestring

Value Axis Type

Default value

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.seriesGroups[0].valueAxis[0].type;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.seriesGroups[0].valueAxis[0].textRotationPoint;

tickMarksobject

Object describing the tick marks properties of the valueAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].valueAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].valueAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].valueAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].valueAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.seriesGroups[0].valueAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].valueAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].valueAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.seriesGroups[0].valueAxis[0].tickMarks;

titleobject

Object describing the title of the valueAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].valueAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].valueAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.seriesGroups[0].valueAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].valueAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.seriesGroups[0].valueAxis[0].title;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].valueAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.seriesGroups[0].valueAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the valueAxis.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].valueAxis[0].visible;

Get the valueAxis property.

 const chart = document.querySelector('smart-chart');

 let valueAxis = chart.seriesGroups[0].valueAxis;

xAxisobject

Object describing the xAxis for this group.

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.seriesGroups[0].xAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.seriesGroups[0].xAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.seriesGroups[0].xAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the xAxis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.seriesGroups[0].xAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].xAxis[0].bands[0].lineColor;

lineWidthstring | null | number

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].xAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].xAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.seriesGroups[0].xAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.seriesGroups[0].xAxis[0].bands;

baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"

The base unit when used with 'date' axis.

Get the baseUnit property.

 const chart = document.querySelector('smart-chart');

 let baseUnit = chart.seriesGroups[0].xAxis[0].baseUnit;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.seriesGroups[0].xAxis[0].customDraw;

dataFieldstring

Points to a data field in the data source.

Default value

Get the dataField property.

 const chart = document.querySelector('smart-chart');

 let dataField = chart.seriesGroups[0].xAxis[0].dataField;

dateFormatstring | null

Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].dateFormat;

displayTextstring | null

Optional custom xAxis display text.

Get the displayText property.

 const chart = document.querySelector('smart-chart');

 let displayText = chart.seriesGroups[0].xAxis[0].displayText;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.seriesGroups[0].xAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the xAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].gridLines[0].dashStyle;

lineWidthstring | number | null

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.seriesGroups[0].xAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].xAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.seriesGroups[0].xAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].xAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].xAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].xAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].xAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].xAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].xAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].xAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.seriesGroups[0].xAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].line.dashStyle;

lineWidthstring | number | null

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.seriesGroups[0].xAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.seriesGroups[0].xAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.seriesGroups[0].xAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the xAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].xAxis[0].maxValue;

minValueany

Sets the minimum value of the xAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].xAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal xAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].xAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical xAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].xAxis[0].padding.left;

rightnumber

Right padding. Available for vertical xAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].xAxis[0].padding.right;

topnumber

Top padding. Available for horizontal xAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].xAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.seriesGroups[0].xAxis[0].padding;

position"bottom" | "top" | "left" | "right"

Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available.

Default value

"bottom"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.seriesGroups[0].xAxis[0].position;

rangeSelectorobject

Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.

backgroundColorstring | null

Sets the range selector chart's background color.

Get the backgroundColor property.

 const chart = document.querySelector('smart-chart');

 let backgroundColor = chart.seriesGroups[0].xAxis[0].rangeSelector.backgroundColor;

backgroundImagestring

Sets the range selector chart's background image.

Default value

Get the backgroundImage property.

 const chart = document.querySelector('smart-chart');

 let backgroundImage = chart.seriesGroups[0].xAxis[0].rangeSelector.backgroundImage;

baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"

The base unit when used with 'date' axis.

Get the baseUnit property.

 const chart = document.querySelector('smart-chart');

 let baseUnit = chart.seriesGroups[0].xAxis[0].rangeSelector.baseUnit;

borderLineColorstring | null

Sets the range selector chart's border color.

Get the borderLineColor property.

 const chart = document.querySelector('smart-chart');

 let borderLineColor = chart.seriesGroups[0].xAxis[0].rangeSelector.borderLineColor;

borderLineWidthnumber | null

Sets the range selector chart's border line width.

Get the borderLineWidth property.

 const chart = document.querySelector('smart-chart');

 let borderLineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.borderLineWidth;

captionstring

Sets the caption (title) of the range selector chart.

Default value

Get the caption property.

 const chart = document.querySelector('smart-chart');

 let caption = chart.seriesGroups[0].xAxis[0].rangeSelector.caption;

colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"

Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.

Default value

scheme01

Get the colorScheme property.

 const chart = document.querySelector('smart-chart');

 let colorScheme = chart.seriesGroups[0].xAxis[0].rangeSelector.colorScheme;

columnSeriesOverlapboolean

Enables or disables overlapping of the column series.

Default value

false

Get the columnSeriesOverlap property.

 const chart = document.querySelector('smart-chart');

 let columnSeriesOverlap = chart.seriesGroups[0].xAxis[0].rangeSelector.columnSeriesOverlap;

columnsGapPercentnumber

Percentage gap between columns within the same serie.

Default value

Get the columnsGapPercent property.

 const chart = document.querySelector('smart-chart');

 let columnsGapPercent = chart.seriesGroups[0].xAxis[0].rangeSelector.columnsGapPercent;

dataFieldstring | null

Points to a data field in the data source.

Get the dataField property.

 const chart = document.querySelector('smart-chart');

 let dataField = chart.seriesGroups[0].xAxis[0].rangeSelector.dataField;

descriptionstring

Sets the description text of the range selector chart.

Default value

Get the description property.

 const chart = document.querySelector('smart-chart');

 let description = chart.seriesGroups[0].xAxis[0].rangeSelector.description;

greyScaleboolean | null

Determines whether to display the range selector chart using greyscale colors.

Default value

false

Get the greyScale property.

 const chart = document.querySelector('smart-chart');

 let greyScale = chart.seriesGroups[0].xAxis[0].rangeSelector.greyScale;

gridLinesobject

Object describing the grid lines properties of the range selector chart's xAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the values.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.formatFunction;

formatSettingsany

Chart Format Settings

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.formatSettings;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.seriesGroups[0].xAxis[0].rangeSelector.labels;

maxValueany

Sets the maximum value of the range selector chart's xAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.maxValue;

minValueany

Sets the minimum value of the range selector chart's xAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.minValue;

paddingobject

Object describing the padding of the range selector chart.

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.seriesGroups[0].xAxis[0].rangeSelector.padding;

position"bottom" | "top" | "left" | "right"

Sets the range selector chart position.

Default value

left

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.seriesGroups[0].xAxis[0].rangeSelector.position;

renderToHTMLElement | null

An HTML element outside the chart to render the range selector chart to.

Get the renderTo property.

 const chart = document.querySelector('smart-chart');

 let renderTo = chart.seriesGroups[0].xAxis[0].rangeSelector.renderTo;

rightToLeftboolean | null

Sets or gets a value indicating whether the range selector chart's layout is mirrored.

Default value

false

Get the rightToLeft property.

 const chart = document.querySelector('smart-chart');

 let rightToLeft = chart.seriesGroups[0].xAxis[0].rangeSelector.rightToLeft;

seriesGapPercentnumber

Percentage gap between columns belonging to different series.

Default value

Get the seriesGapPercent property.

 const chart = document.querySelector('smart-chart');

 let seriesGapPercent = chart.seriesGroups[0].xAxis[0].rangeSelector.seriesGapPercent;

seriesGroups[] | null

(Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.

Please refer to the main seriesGroups property entry for more information and a full subproperty list.

Get the seriesGroups property.

 const chart = document.querySelector('smart-chart');

 let seriesGroups = chart.seriesGroups[0].xAxis[0].rangeSelector.seriesGroups;

serieType"column" | "stackedcolumn" | "stackedcolumn100" | "rangecolumn" | "waterfall" | "stackedwaterfall" | "line" | "stackedline" | "stackedline100" | "spline" | "stackedspline" | "stackedspline100" | "stepline" | "stackedstepline" | "stackedstepline100" | "area" | "stackedarea" | "stackedarea100" | "rangearea" | "splinearea" | "stackedsplinearea" | "stackedsplinearea100" | "splinerangearea" | "steprangearea" | "stackedsplineara" | "steparea" | "stackedsteparea" | "stackedsteparea100" | "pie" | "donut" | "scatter" | "stackedscatter" | "stackedscatter100" | "bubble" | "stackedbubble" | "stackedbubble100" | "candlestick" | "ohlc"

Sets the range selector chart type. smartChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, smartChart supports the following series types:

'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points

Default value

area

Get the serieType property.

 const chart = document.querySelector('smart-chart');

 let serieType = chart.seriesGroups[0].xAxis[0].rangeSelector.serieType;

showBorderLineboolean | null

Determines whether to display the range selector chart's border line.

Default value

false

Get the showBorderLine property.

 const chart = document.querySelector('smart-chart');

 let showBorderLine = chart.seriesGroups[0].xAxis[0].rangeSelector.showBorderLine;

sizenumber | null

Sets the size of the range selector chart.

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.seriesGroups[0].xAxis[0].rangeSelector.size;

skipOverlappingPointsboolean

Determines whether to display overlapping data points in column, ohlc and candlestick series.

Default value

true

Get the skipOverlappingPoints property.

 const chart = document.querySelector('smart-chart');

 let skipOverlappingPoints = chart.seriesGroups[0].xAxis[0].rangeSelector.skipOverlappingPoints;

titlePaddingobject

Sets the padding of the chart's title (caption).

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.top;

Get the titlePadding property.

 const chart = document.querySelector('smart-chart');

 let titlePadding = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.unitInterval;

valueAxisobject

An object with settings about the range selector Chart's y-axis (value axis).

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the axis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;

lineWidthstring | null

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands;

baselineValueany

Sets the baseline value for the axis.

Default value

Get the baselineValue property.

 const chart = document.querySelector('smart-chart');

 let baselineValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].baselineValue;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].customDraw;

displayValueAxisboolean

Specifies whether the values axis is displayed.

Default value

true

Get the displayValueAxis property.

 const chart = document.querySelector('smart-chart');

 let displayValueAxis = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the valueAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the valueAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].maxValue;

minValueany

Sets the minimum value of the valueAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal valueAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical valueAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.left;

rightnumber

Right padding. Available for vertical valueAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.right;

topnumber

Top padding. Available for horizontal valueAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding;

position"left" | "right" | "top" | "bottom"

Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.

Default value

"left"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].position;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;

typestring

Value Axis Type

Default value

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].type;

tickMarksobject

Object describing the tick marks properties of the valueAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks;

titleobject

Object describing the title of the valueAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the valueAxis.

Default value

false

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].visible;

Get the valueAxis property.

 const chart = document.querySelector('smart-chart');

 let valueAxis = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis;

visibleboolean

Shows or hides the range selector.

Default value

false

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.visible;

Get the rangeSelector property.

 const chart = document.querySelector('smart-chart');

 let rangeSelector = chart.seriesGroups[0].xAxis[0].rangeSelector;

textstring

xAxis's text value.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.seriesGroups[0].xAxis[0].text;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.seriesGroups[0].xAxis[0].textRotationAngle;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.seriesGroups[0].xAxis[0].textRotationPoint;

tickMarksobject

Object describing the tick marks properties of the xAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.seriesGroups[0].xAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.seriesGroups[0].xAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.seriesGroups[0].xAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.seriesGroups[0].xAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.seriesGroups[0].xAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.seriesGroups[0].xAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.seriesGroups[0].xAxis[0].tickMarks;

titleobject

Object describing the title of the xAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.seriesGroups[0].xAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.seriesGroups[0].xAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.seriesGroups[0].xAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.seriesGroups[0].xAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.seriesGroups[0].xAxis[0].title;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format xAxis values in tooltips.

Get the toolTipFormatFunction property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatFunction = chart.seriesGroups[0].xAxis[0].toolTipFormatFunction;

toolTipFormatSettingsobject

Settings used to format xAxis values in tooltips.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].thousandsSeparator;

Get the toolTipFormatSettings property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatSettings = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings;

type"auto" | "date" | "basic" | "linear"

The type of the axis.

'auto' - automatically detects and switches to 'basic', 'linear' or 'date'.
'date' - when displaying dates.
'basic' - displays all data points sequentially.
'linear' - linear arrangement by the value of the xAxis data field.

Default value

"auto"

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.seriesGroups[0].xAxis[0].type;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.seriesGroups[0].xAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.seriesGroups[0].xAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the xAxis.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.seriesGroups[0].xAxis[0].visible;

Get the xAxis property.

 const chart = document.querySelector('smart-chart');

 let xAxis = chart.seriesGroups[0].xAxis;

showBorderLineboolean

Determines whether to display the chart's border line.

Default value

true

Example about showBorderLine
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showBorderLine: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

showLegendboolean

Determines whether to show or hide the chart series legend.

Default value

true

Example about showLegend
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showLegend: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

showToolTipsboolean

Enables or disables the chart tooltips.

Default value

true

Example about showToolTips
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showToolTips: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

showToolTipsOnAllSeriesboolean

Determines whether to show a composite tooltip containing information for all series.

Default value

false

Example about showToolTipsOnAllSeries
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showToolTipsOnAllSeries: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

themestring

Determines the set of default background, line, text and band colors that will be used in the Chart.

Default value

"light"

Example about theme
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	theme: 'dark',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

titlePaddingobject

Sets the padding of the chart's title (caption).

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.titlePadding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.titlePadding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.titlePadding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.titlePadding.top;

Example about titlePadding
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	titlePadding: { top: 20, bottom: 50 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

toolTipBackgroundstring | null

Tooltip background color.

Example about toolTipBackground
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipBackground: '#C0C0C0',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

User defined tooltip text formatting callback function.

Example about toolTipFormatFunction
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipFormatFunction: toolTipFormatFunction: function (value, itemIndex, serie, group, xAxisValue, xAxis) {
                return 'Highlighted value' + value;
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

toolTipHideDelaynumber

Determines the tooltip hide delay in milliseconds.

Default value

4000

Example about toolTipHideDelay
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipHideDelay: 10000,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

toolTipLineColorstring | null

Tooltip line color.

Example about toolTipLineColor
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipLineColor: '#B200FF',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

toolTipShowDelaynumber

Determines the tooltip show delay in milliseconds. Values may range from 0 to 10000 [ms].

Default value

300

Example about toolTipShowDelay
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipShowDelay: 1000,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

valueAxisobject

An object with settings about the Chart's y-axis (value axis).

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.valueAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.valueAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.valueAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the axis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.valueAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.valueAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.valueAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.valueAxis[0].bands[0].lineColor;

lineWidthstring | null

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.valueAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.valueAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.valueAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.valueAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.valueAxis[0].bands;

baselineValueany

Sets the baseline value for the axis.

Default value

Get the baselineValue property.

 const chart = document.querySelector('smart-chart');

 let baselineValue = chart.valueAxis[0].baselineValue;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.valueAxis[0].customDraw;

descriptionstring

Sets the description of the value axis.

Default value

Get the description property.

 const chart = document.querySelector('smart-chart');

 let description = chart.valueAxis[0].description;

displayValueAxisboolean

Specifies whether the values axis is displayed.

Default value

true

Get the displayValueAxis property.

 const chart = document.querySelector('smart-chart');

 let displayValueAxis = chart.valueAxis[0].displayValueAxis;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.valueAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.valueAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.valueAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.valueAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.valueAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.valueAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.valueAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.valueAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.valueAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.valueAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the valueAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.valueAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.valueAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.valueAxis[0].gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.valueAxis[0].gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.valueAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.valueAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.valueAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.valueAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.valueAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.valueAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.valueAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.valueAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.valueAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.valueAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.valueAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.valueAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.valueAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.valueAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.valueAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.valueAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.valueAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.valueAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.valueAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.valueAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.valueAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.valueAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.valueAxis[0].line.dashStyle;

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.valueAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.valueAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.valueAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.valueAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the valueAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.valueAxis[0].maxValue;

minValueany

Sets the minimum value of the valueAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.valueAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal valueAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.valueAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical valueAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.valueAxis[0].padding.left;

rightnumber

Right padding. Available for vertical valueAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.valueAxis[0].padding.right;

topnumber

Top padding. Available for horizontal valueAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.valueAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.valueAxis[0].padding;

position"left" | "right" | "top" | "bottom"

Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.

Default value

"left"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.valueAxis[0].position;

typestring

Value Axis Type

Default value

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.valueAxis[0].type;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.valueAxis[0].textRotationAngle;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.valueAxis[0].textRotationPoint;

tickMarksobject

Object describing the tick marks properties of the valueAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.valueAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.valueAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.valueAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.valueAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.valueAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.valueAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.valueAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.valueAxis[0].tickMarks;

titleobject

Object describing the title of the valueAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.valueAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.valueAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.valueAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.valueAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.valueAxis[0].title;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.valueAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.valueAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the valueAxis.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.valueAxis[0].visible;

xAxisobject

Sets the Chart's xAxis.

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.xAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.xAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.xAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the xAxis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.xAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.xAxis[0].bands[0].lineColor;

lineWidthstring | null

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.xAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.xAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.xAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.xAxis[0].bands;

baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"

The base unit when used with 'date' axis.

Get the baseUnit property.

 const chart = document.querySelector('smart-chart');

 let baseUnit = chart.xAxis[0].baseUnit;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.xAxis[0].customDraw;

dataFieldstring

Points to a data field in the data source.

Default value

Get the dataField property.

 const chart = document.querySelector('smart-chart');

 let dataField = chart.xAxis[0].dataField;

dateFormatstring | null

Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].dateFormat;

displayTextstring | null

Optional custom xAxis display text.

Get the displayText property.

 const chart = document.querySelector('smart-chart');

 let displayText = chart.xAxis[0].displayText;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.xAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the xAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.xAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.xAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.xAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.xAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.xAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.xAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.xAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.xAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.xAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.xAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.xAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].line.dashStyle;

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.xAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.xAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.xAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the xAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.xAxis[0].maxValue;

minValueany

Sets the minimum value of the xAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.xAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal xAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.xAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical xAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.xAxis[0].padding.left;

rightnumber

Right padding. Available for vertical xAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.xAxis[0].padding.right;

topnumber

Top padding. Available for horizontal xAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.xAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.xAxis[0].padding;

position"bottom" | "top" | "left" | "right"

Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available.

Default value

"bottom"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.xAxis[0].position;

rangeSelectorobject

Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.

backgroundColorstring | null

Sets the range selector chart's background color.

Get the backgroundColor property.

 const chart = document.querySelector('smart-chart');

 let backgroundColor = chart.xAxis[0].rangeSelector.backgroundColor;

backgroundImagestring

Sets the range selector chart's background image.

Default value

Get the backgroundImage property.

 const chart = document.querySelector('smart-chart');

 let backgroundImage = chart.xAxis[0].rangeSelector.backgroundImage;

baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"

The base unit when used with 'date' axis.

Get the baseUnit property.

 const chart = document.querySelector('smart-chart');

 let baseUnit = chart.xAxis[0].rangeSelector.baseUnit;

borderLineColorstring | null

Sets the range selector chart's border color.

Get the borderLineColor property.

 const chart = document.querySelector('smart-chart');

 let borderLineColor = chart.xAxis[0].rangeSelector.borderLineColor;

borderLineWidthnumber | null

Sets the range selector chart's border line width.

Get the borderLineWidth property.

 const chart = document.querySelector('smart-chart');

 let borderLineWidth = chart.xAxis[0].rangeSelector.borderLineWidth;

captionstring

Sets the caption (title) of the range selector chart.

Default value

Get the caption property.

 const chart = document.querySelector('smart-chart');

 let caption = chart.xAxis[0].rangeSelector.caption;

colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"

Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.

Default value

scheme01

Get the colorScheme property.

 const chart = document.querySelector('smart-chart');

 let colorScheme = chart.xAxis[0].rangeSelector.colorScheme;

columnSeriesOverlapboolean

Enables or disables overlapping of the column series.

Default value

false

Get the columnSeriesOverlap property.

 const chart = document.querySelector('smart-chart');

 let columnSeriesOverlap = chart.xAxis[0].rangeSelector.columnSeriesOverlap;

columnsGapPercentnumber

Percentage gap between columns within the same serie.

Default value

Get the columnsGapPercent property.

 const chart = document.querySelector('smart-chart');

 let columnsGapPercent = chart.xAxis[0].rangeSelector.columnsGapPercent;

dataFieldstring | null

Points to a data field in the data source.

Get the dataField property.

 const chart = document.querySelector('smart-chart');

 let dataField = chart.xAxis[0].rangeSelector.dataField;

descriptionstring

Sets the description text of the range selector chart.

Default value

Get the description property.

 const chart = document.querySelector('smart-chart');

 let description = chart.xAxis[0].rangeSelector.description;

greyScaleboolean | null

Determines whether to display the range selector chart using greyscale colors.

Default value

false

Get the greyScale property.

 const chart = document.querySelector('smart-chart');

 let greyScale = chart.xAxis[0].rangeSelector.greyScale;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the values.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].rangeSelector.formatFunction;

formatSettingsany

Chart Format Settings

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].rangeSelector.formatSettings;

gridLinesobject

Object describing the grid lines properties of the range selector chart's xAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].rangeSelector.gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].rangeSelector.gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].rangeSelector.gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].rangeSelector.gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].rangeSelector.gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.xAxis[0].rangeSelector.gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.xAxis[0].rangeSelector.labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.xAxis[0].rangeSelector.labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.xAxis[0].rangeSelector.labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].rangeSelector.labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].rangeSelector.labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].rangeSelector.labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.xAxis[0].rangeSelector.labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.xAxis[0].rangeSelector.labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.xAxis[0].rangeSelector.labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.xAxis[0].rangeSelector.labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.xAxis[0].rangeSelector.labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].rangeSelector.labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.xAxis[0].rangeSelector.labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.xAxis[0].rangeSelector.labels;

maxValueany

Sets the maximum value of the range selector chart's xAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.xAxis[0].rangeSelector.maxValue;

minValueany

Sets the minimum value of the range selector chart's xAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.xAxis[0].rangeSelector.minValue;

paddingobject

Object describing the padding of the range selector chart.

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.xAxis[0].rangeSelector.padding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.xAxis[0].rangeSelector.padding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.xAxis[0].rangeSelector.padding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.xAxis[0].rangeSelector.padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.xAxis[0].rangeSelector.padding;

position"bottom" | "top" | "left" | "right"

Sets the range selector chart position.

Default value

left

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.xAxis[0].rangeSelector.position;

renderToHTMLElement | null

An HTML element outside the chart to render the range selector chart to.

Get the renderTo property.

 const chart = document.querySelector('smart-chart');

 let renderTo = chart.xAxis[0].rangeSelector.renderTo;

rightToLeftboolean | null

Sets or gets a value indicating whether the range selector chart's layout is mirrored.

Default value

false

Get the rightToLeft property.

 const chart = document.querySelector('smart-chart');

 let rightToLeft = chart.xAxis[0].rangeSelector.rightToLeft;

seriesGapPercentnumber

Percentage gap between columns belonging to different series.

Default value

Get the seriesGapPercent property.

 const chart = document.querySelector('smart-chart');

 let seriesGapPercent = chart.xAxis[0].rangeSelector.seriesGapPercent;

seriesGroups[] | null

(Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.

Please refer to the main seriesGroups property entry for more information and a full subproperty list.

Get the seriesGroups property.

 const chart = document.querySelector('smart-chart');

 let seriesGroups = chart.xAxis[0].rangeSelector.seriesGroups;

serieType"column" | "stackedcolumn" | "stackedcolumn100" | "rangecolumn" | "waterfall" | "stackedwaterfall" | "line" | "stackedline" | "stackedline100" | "spline" | "stackedspline" | "stackedspline100" | "stepline" | "stackedstepline" | "stackedstepline100" | "area" | "stackedarea" | "stackedarea100" | "rangearea" | "splinearea" | "stackedsplinearea" | "stackedsplinearea100" | "splinerangearea" | "steprangearea" | "stackedsplineara" | "steparea" | "stackedsteparea" | "stackedsteparea100" | "pie" | "donut" | "scatter" | "stackedscatter" | "stackedscatter100" | "bubble" | "stackedbubble" | "stackedbubble100" | "candlestick" | "ohlc"

'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points

Default value

area

Get the serieType property.

 const chart = document.querySelector('smart-chart');

 let serieType = chart.xAxis[0].rangeSelector.serieType;

showBorderLineboolean | null

Determines whether to display the range selector chart's border line.

Default value

true

Get the showBorderLine property.

 const chart = document.querySelector('smart-chart');

 let showBorderLine = chart.xAxis[0].rangeSelector.showBorderLine;

sizenumber | null

Sets the size of the range selector chart.

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.xAxis[0].rangeSelector.size;

skipOverlappingPointsboolean

Determines whether to display overlapping data points in column, ohlc and candlestick series.

Default value

true

Get the skipOverlappingPoints property.

 const chart = document.querySelector('smart-chart');

 let skipOverlappingPoints = chart.xAxis[0].rangeSelector.skipOverlappingPoints;

titlePaddingobject

Sets the padding of the chart's title (caption).

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.xAxis[0].rangeSelector.titlePadding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.xAxis[0].rangeSelector.titlePadding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.xAxis[0].rangeSelector.titlePadding.right;

topnumber

Top padding.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.xAxis[0].rangeSelector.titlePadding.top;

Get the titlePadding property.

 const chart = document.querySelector('smart-chart');

 let titlePadding = chart.xAxis[0].rangeSelector.titlePadding;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.unitInterval;

valueAxisobject

An object with settings about the range selector Chart's y-axis (value axis).

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value

Get the alternatingBackgroundColor property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;

alternatingBackgroundColor2string

Second alternating background color.

Default value

Get the alternatingBackgroundColor2 property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundColor2 = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value

Get the alternatingBackgroundOpacity property.

 const chart = document.querySelector('smart-chart');

 let alternatingBackgroundOpacity = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;

axisSizenumber | string | null

Sets the size of the axis.

Get the axisSize property.

 const chart = document.querySelector('smart-chart');

 let axisSize = chart.xAxis[0].rangeSelector.valueAxis[0].axisSize;

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].color;

dashStylestring | null

Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;

lineColorstring | null

Band line color.

Get the lineColor property.

 const chart = document.querySelector('smart-chart');

 let lineColor = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;

lineWidthstring | null

Band line width.

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const chart = document.querySelector('smart-chart');

 let opacity = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;

Get the bands property.

 const chart = document.querySelector('smart-chart');

 let bands = chart.xAxis[0].rangeSelector.valueAxis[0].bands;

baselineValueany

Sets the baseline value for the axis.

Default value

Get the baselineValue property.

 const chart = document.querySelector('smart-chart');

 let baselineValue = chart.xAxis[0].rangeSelector.valueAxis[0].baselineValue;

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default value

false

Get the customDraw property.

 const chart = document.querySelector('smart-chart');

 let customDraw = chart.xAxis[0].rangeSelector.valueAxis[0].customDraw;

displayValueAxisboolean

Specifies whether the values axis is displayed.

Default value

true

Get the displayValueAxis property.

 const chart = document.querySelector('smart-chart');

 let displayValueAxis = chart.xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const chart = document.querySelector('smart-chart');

 let flip = chart.xAxis[0].rangeSelector.valueAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].rangeSelector.valueAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the valueAxis.

Properties

colorstring

Color of the grid lines.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;

custom[] | null

An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the grid lines.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;

unitIntervalnumber

Sets the interval between the grid lines.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;

Get the gridLines property.

 const chart = document.querySelector('smart-chart');

 let gridLines = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const chart = document.querySelector('smart-chart');

 let angle = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;

autoRotateboolean

boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.

Default value

false

Get the autoRotate property.

 const chart = document.querySelector('smart-chart');

 let autoRotate = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;

classstring | null

CSS class of the labels.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].class;

custom[] | null

An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const chart = document.querySelector('smart-chart');

 let formatFunction = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const chart = document.querySelector('smart-chart');

 let formatSettings = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;

horizontalAlignment"left" | "center" | "right"

Horizontal labels alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;

offsetobject

Labels offset.

Properties

xnumber

Horizontal offset.

Default value

Get the x property.

 const chart = document.querySelector('smart-chart');

 let x = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;

ynumber

Vertical offset.

Default value

Get the y property.

 const chart = document.querySelector('smart-chart');

 let y = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;

Get the offset property.

 const chart = document.querySelector('smart-chart');

 let offset = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;

rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the rotationPoint property.

 const chart = document.querySelector('smart-chart');

 let rotationPoint = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;

verticalAlignment"top" | "center" | "bottom"

Vertical labels alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;

Get the labels property.

 const chart = document.querySelector('smart-chart');

 let labels = chart.xAxis[0].rangeSelector.valueAxis[0].labels;

lineobject

Object describing the line properties of the axis.

Properties

colorstring

Color of axis line.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].rangeSelector.valueAxis[0].line.color;

dashStylestring

Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;

visibleboolean

boolean determining the visibility of the axis line.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].line.visible;

Get the line property.

 const chart = document.querySelector('smart-chart');

 let line = chart.xAxis[0].rangeSelector.valueAxis[0].line;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScale = chart.xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const chart = document.querySelector('smart-chart');

 let logarithmicScaleBase = chart.xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the valueAxis.

Default value

NaN

Get the maxValue property.

 const chart = document.querySelector('smart-chart');

 let maxValue = chart.xAxis[0].rangeSelector.valueAxis[0].maxValue;

minValueany

Sets the minimum value of the valueAxis.

Default value

NaN

Get the minValue property.

 const chart = document.querySelector('smart-chart');

 let minValue = chart.xAxis[0].rangeSelector.valueAxis[0].minValue;

paddingobject

Object describing the padding of the axis.

Properties

bottomnumber

Bottom padding. Available for horizontal valueAxis.

Default value

Get the bottom property.

 const chart = document.querySelector('smart-chart');

 let bottom = chart.xAxis[0].rangeSelector.valueAxis[0].padding.bottom;

leftnumber

Left padding. Available for vertical valueAxis.

Default value

Get the left property.

 const chart = document.querySelector('smart-chart');

 let left = chart.xAxis[0].rangeSelector.valueAxis[0].padding.left;

rightnumber

Right padding. Available for vertical valueAxis.

Default value

Get the right property.

 const chart = document.querySelector('smart-chart');

 let right = chart.xAxis[0].rangeSelector.valueAxis[0].padding.right;

topnumber

Top padding. Available for horizontal valueAxis.

Default value

Get the top property.

 const chart = document.querySelector('smart-chart');

 let top = chart.xAxis[0].rangeSelector.valueAxis[0].padding.top;

Get the padding property.

 const chart = document.querySelector('smart-chart');

 let padding = chart.xAxis[0].rangeSelector.valueAxis[0].padding;

position"left" | "right" | "top" | "bottom"

Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.

Default value

"left"

Get the position property.

 const chart = document.querySelector('smart-chart');

 let position = chart.xAxis[0].rangeSelector.valueAxis[0].position;

typestring

Value Axis Type

Default value

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.xAxis[0].rangeSelector.valueAxis[0].type;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;

tickMarksobject

Object describing the tick marks properties of the valueAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks;

titleobject

Object describing the title of the valueAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.xAxis[0].rangeSelector.valueAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.xAxis[0].rangeSelector.valueAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.xAxis[0].rangeSelector.valueAxis[0].title;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the valueAxis.

Default value

false

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.valueAxis[0].visible;

Get the valueAxis property.

 const chart = document.querySelector('smart-chart');

 let valueAxis = chart.xAxis[0].rangeSelector.valueAxis;

visibleboolean

Shows or hides the range selector.

Default value

false

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].rangeSelector.visible;

Get the rangeSelector property.

 const chart = document.querySelector('smart-chart');

 let rangeSelector = chart.xAxis[0].rangeSelector;

textstring

xAxis's text value.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.xAxis[0].text;

textRotationAnglenumber | null

Text rotation angle.

Get the textRotationAngle property.

 const chart = document.querySelector('smart-chart');

 let textRotationAngle = chart.xAxis[0].textRotationAngle;

textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"

Position to rotate the text around.

Default value

"auto"

Get the textRotationPoint property.

 const chart = document.querySelector('smart-chart');

 let textRotationPoint = chart.xAxis[0].textRotationPoint;

tickMarksobject

Object describing the tick marks properties of the xAxis.

Properties

colorstring

Color of the tick marks.

Default value

Get the color property.

 const chart = document.querySelector('smart-chart');

 let color = chart.xAxis[0].tickMarks[0].color;

custom[] | null

An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.

Get the custom property.

 const chart = document.querySelector('smart-chart');

 let custom = chart.xAxis[0].tickMarks[0].custom;

dashStylestring

Tick marks dash style, e.g. '2,2'.

Default value

Get the dashStyle property.

 const chart = document.querySelector('smart-chart');

 let dashStyle = chart.xAxis[0].tickMarks[0].dashStyle;

lineWidthnumber

Line width (in pixels) of the tick marks.

Default value

Get the lineWidth property.

 const chart = document.querySelector('smart-chart');

 let lineWidth = chart.xAxis[0].tickMarks[0].lineWidth;

sizenumber

Size (in pixels) of the tick marks.

Default value

Get the size property.

 const chart = document.querySelector('smart-chart');

 let size = chart.xAxis[0].tickMarks[0].size;

stepnumber | null

Interval steps between tick mark placements (multiples of the axis unit interval).

Get the step property.

 const chart = document.querySelector('smart-chart');

 let step = chart.xAxis[0].tickMarks[0].step;

unitIntervalnumber

Sets the interval between tick marks.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].tickMarks[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].tickMarks[0].visible;

Get the tickMarks property.

 const chart = document.querySelector('smart-chart');

 let tickMarks = chart.xAxis[0].tickMarks;

titleobject

Object describing the title of the xAxis.

Properties

classstring | null

CSS class of the title text.

Get the class property.

 const chart = document.querySelector('smart-chart');

 let class = chart.xAxis[0].title.class;

horizontalAlignment"left" | "center" | "right"

Horizontal alignment.

Default value

"center"

Get the horizontalAlignment property.

 const chart = document.querySelector('smart-chart');

 let horizontalAlignment = chart.xAxis[0].title.horizontalAlignment;

textstring

Text of the title.

Default value

Get the text property.

 const chart = document.querySelector('smart-chart');

 let text = chart.xAxis[0].title.text;

verticalAlignment"top" | "center" | "bottom"

Vertical alignment.

Default value

"center"

Get the verticalAlignment property.

 const chart = document.querySelector('smart-chart');

 let verticalAlignment = chart.xAxis[0].title.verticalAlignment;

visibleboolean

boolean determining the visibility of the title.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].title.visible;

Get the title property.

 const chart = document.querySelector('smart-chart');

 let title = chart.xAxis[0].title;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format xAxis values in tooltips.

Get the toolTipFormatFunction property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatFunction = chart.xAxis[0].toolTipFormatFunction;

toolTipFormatSettingsobject

Settings used to format xAxis values in tooltips.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const chart = document.querySelector('smart-chart');

 let dateFormat = chart.xAxis[0].toolTipFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const chart = document.querySelector('smart-chart');

 let decimalPlaces = chart.xAxis[0].toolTipFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const chart = document.querySelector('smart-chart');

 let decimalSeparator = chart.xAxis[0].toolTipFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const chart = document.querySelector('smart-chart');

 let negativeWithBrackets = chart.xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const chart = document.querySelector('smart-chart');

 let prefix = chart.xAxis[0].toolTipFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const chart = document.querySelector('smart-chart');

 let sufix = chart.xAxis[0].toolTipFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const chart = document.querySelector('smart-chart');

 let thousandsSeparator = chart.xAxis[0].toolTipFormatSettings[0].thousandsSeparator;

Get the toolTipFormatSettings property.

 const chart = document.querySelector('smart-chart');

 let toolTipFormatSettings = chart.xAxis[0].toolTipFormatSettings;

type"auto" | "date" | "basic" | "linear"

The type of the axis.

'auto' - automatically detects and switches to 'basic', 'linear' or 'date'.
'date' - when displaying dates.
'basic' - displays all data points sequentially.
'linear' - linear arrangement by the value of the xAxis data field.

Default value

"auto"

Get the type property.

 const chart = document.querySelector('smart-chart');

 let type = chart.xAxis[0].type;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const chart = document.querySelector('smart-chart');

 let unitInterval = chart.xAxis[0].unitInterval;

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default value

true

Get the valuesOnTicks property.

 const chart = document.querySelector('smart-chart');

 let valuesOnTicks = chart.xAxis[0].valuesOnTicks;

visibleboolean

Shows or hides the xAxis.

Default value

true

Get the visible property.

 const chart = document.querySelector('smart-chart');

 let visible = chart.xAxis[0].visible;

Events

annotationClickCustomEvent

The event is raised when the user clicks on a chart annotation.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onAnnotationClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of annotationClick event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationClick', function (event) {
	// event handling code goes here.
})

annotationMouseenterCustomEvent

The event is raised when the user moves the cursor above a chart annotation.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onAnnotationMouseenter

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of annotationMouseenter event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationMouseenter', function (event) {
	// event handling code goes here.
})

annotationMouseleaveCustomEvent

The event is raised when the user moves the cursor out of a chart annotation.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onAnnotationMouseleave

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of annotationMouseleave event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationMouseleave', function (event) {
	// event handling code goes here.
})

clickCustomEvent

The event is raised when the user clicks on series element.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of click event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('click', function (event) {
	// event handling code goes here.
})

mouseoutCustomEvent

The event is raised when the user moves the cursor out of a series element.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMouseout

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of mouseout event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('mouseout', function (event) {
	// event handling code goes here.
})

mouseoverCustomEvent

The event is raised when the user moves the cursor above a series element.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMouseover

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of mouseover event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('mouseover', function (event) {
	// event handling code goes here.
})

rangeSelectionChangedCustomEvent

The event is raised after the chart's range selector position changes and after the chart ends rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRangeSelectionChanged

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rangeSelectionChanged event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('rangeSelectionChanged', function (event) {
	// event handling code goes here.
})

rangeSelectionChangingCustomEvent

The event is raised when the chart's range selector position changes and before the chart starts rendering.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onRangeSelectionChanging

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rangeSelectionChanging event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('rangeSelectionChanging', function (event) {
	// event handling code goes here.
})

refreshBeginCustomEvent

The event is raised when the chart begins rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRefreshBegin

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of refreshBegin event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('refreshBegin', function (event) {
	// event handling code goes here.
})

refreshEndCustomEvent

The event is raised when the chart finishes rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRefreshEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of refreshEnd event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('refreshEnd', function (event) {
	// event handling code goes here.
})

toggleCustomEvent

The event is raised when a serie is toggled by a user click in the chart's legend or through an API call.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onToggle

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of toggle event.

const chart = document.querySelector('smart-chart');
chart.addEventListener('toggle', function (event) {
	// event handling code goes here.
})

Methods

addColorScheme( schemeName: string, colorsArray: any[]): void

Adds a new color sheme. If a scheme with the same name already exists, the method will update its colors.

Arguments

schemeNamestring

The name of the custom color scheme.

colorsArrayany[]

An array of color values.

Invoke the addColorScheme method.

const chart = document.querySelector('smart-chart');
chart.addColorScheme("'myScheme'","['#1A6642', '#46C26F', '#F9B956', '#F38443', '#DE513D']");

getColorScheme( schemeName: string): []

Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined.

Arguments

schemeNamestring

The name of the color scheme.

Returns[]

Invoke the getColorScheme method.

const chart = document.querySelector('smart-chart');
const result = chart.getColorScheme("'myScheme'");

getItemCoord( groupIndex: number, serieIndex: number, itemIndex: number): { x: number, y: number, width?: number, height?: number, center?: number, centerOffset?: number, innerRadius?: number, outerRadius?: number, selectedRadiusChange?: number, fromAngle?: number, toAngle?: number, radius?: number }

Gets the rendered coordinates of a data point element.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndexnumber

Item (data point) index.

Returns{ x: number, y: number, width?: number, height?: number, center?: number, centerOffset?: number, innerRadius?: number, outerRadius?: number, selectedRadiusChange?: number, fromAngle?: number, toAngle?: number, radius?: number }

Invoke the getItemCoord method.

const chart = document.querySelector('smart-chart');
const result = chart.getItemCoord(0,1,5);

getItemsCount( groupIndex: number, serieIndex: number): number

Gets the number of rendered items in a specific serie.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

Returnsnumber

Invoke the getItemsCount method.

const chart = document.querySelector('smart-chart');
const result = chart.getItemsCount(0,1);

getValueAxisLabels( groupIndex: number): { offset: { x: number, y: number }, value: any }[]

Gets the rendered coordinates and values of the valueAxis labels.

Arguments

groupIndexnumber

Series group index.

Returns{ offset: { x: number, y: number }, value: any }[]

Invoke the getValueAxisLabels method.

const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisLabels(0);

getValueAxisRect( groupIndex: number): DOMRect

Gets the rendered rectangle coordinates of the valueAxis of specific serie group.

Arguments

groupIndexnumber

Series group index.

ReturnsDOMRect

Invoke the getValueAxisRect method.

const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisRect(1);

getValueAxisValue( offset: number, groupIndex: number): object

Gets the valueAxis (vertical axis)'s value.

Arguments

offsetnumber

Vertical offset.

groupIndexnumber

Series group index.

Returnsobject

Invoke the getValueAxisValue method.

const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisValue(100,0);

getXAxisLabels( groupIndex: number): { offset: { x: number, y: number }, value: any }[]

Gets the rendered coordinates and values of the xAxis labels.

Arguments

groupIndexnumber

Series group index.

Returns{ offset: { x: number, y: number }, value: any }[]

Invoke the getXAxisLabels method.

const chart = document.querySelector('smart-chart');
const result = chart.getXAxisLabels(0);

getXAxisRect( groupIndex: number): DOMRect

Gets the rendered rectangle coordinates of the x-Axis of specific serie group.

Arguments

groupIndexnumber

Series group index.

ReturnsDOMRect

Invoke the getXAxisRect method.

const chart = document.querySelector('smart-chart');
const result = chart.getXAxisRect(1);

getXAxisValue( offset: number, groupIndex: number): object

Gets the xAxis (horizontal axis)'s value.

Arguments

offsetnumber

Horizontal offset.

groupIndexnumber

Series group index.

Returnsobject

Invoke the getXAxisValue method.

const chart = document.querySelector('smart-chart');
const result = chart.getXAxisValue(100,0);

hideSerie( groupIndex: number, serieIndex: number, itemIndex?: number): void

Hides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index. Applicable to pie and donut series only.

Invoke the hideSerie method.

const chart = document.querySelector('smart-chart');
chart.hideSerie(0,1,"NaN");

hideToolTip( hideDelay?: number): void

Hides the current tooltip if visible.

Arguments

hideDelay?number

Hide delay.

Invoke the hideToolTip method.

const chart = document.querySelector('smart-chart');
chart.hideToolTip(1000);

print(): void

Prints the chart.

Invoke the print method.

const chart = document.querySelector('smart-chart');
chart.print();

refresh(): void

Refreshes the content of the chart element after a property or data update.

Invoke the refresh method.

const chart = document.querySelector('smart-chart');
chart.refresh();

removeColorScheme( schemeName: string): void

Removes an existing color scheme. If the scheme does not exist, the method has no effect.

Arguments

schemeNamestring

The name of the custom color scheme.

Invoke the removeColorScheme method.

const chart = document.querySelector('smart-chart');
chart.removeColorScheme("'myScheme'");

saveAsJPEG( fileName?: string): void

Exports the chart's content as JPEG image.

Arguments

fileName?string

File name.

Invoke the saveAsJPEG method.

const chart = document.querySelector('smart-chart');
chart.saveAsJPEG("'myChart.jpeg'");

saveAsPNG( fileName?: string): void

Exports the chart's content as PNG image.

Arguments

fileName?string

File name.

Invoke the saveAsPNG method.

const chart = document.querySelector('smart-chart');
chart.saveAsPNG("'myChart.png'");

saveAsPDF( fileName?: string, pageOrientation?: string): void

Exports the chart's content as PDF.

Arguments

fileName?string

File name.

pageOrientation?string

PDF page orientation. Possible values: 'portrait' (default), 'landscape'.

Invoke the saveAsPDF method.

const chart = document.querySelector('smart-chart');
chart.saveAsPDF("'myChart.pdf'","'landscape'");

showSerie( groupIndex: number, serieIndex: number, itemIndex?: number): void

Shows a hidden chart serie. The result of calling this function is same as the user checking the legend box of a chart serie.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index. Applicable to pie and donut series only.

Invoke the showSerie method.

const chart = document.querySelector('smart-chart');
chart.showSerie(0,1,"NaN");

showToolTip( groupIndex: number, serieIndex: number, itemIndex: number, showDelay?: number, hideDelay?: number): void

Shows a the tooltip for a particular data point.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndexnumber

Item (data point) index.

showDelay?number

Show delay.

hideDelay?number

Hide delay.

Invoke the showToolTip method.

const chart = document.querySelector('smart-chart');
chart.showToolTip(0,1,5,1000,5000);

update(): void

Updates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values.

Invoke the update method.

const chart = document.querySelector('smart-chart');
chart.update();

CSS Variables

--smart-chart-default-widthvar()

Default value

"850px"

default width of the element

--smart-chart-default-heightvar()

Default value

"500px"

default height of the element

Chart Javascript API

animation"none" | "simple" | "advanced"

Default value

Example about animation

animationDurationnumber

Default value

Example about animationDuration

backgroundColorstring | null

Example about backgroundColor

backgroundImagestring

Default value

Example about backgroundImage

borderLineColorstring | null

Example about borderLineColor

borderLineWidthnumber

Default value

Example about borderLineWidth

captionstring

Default value

clipboolean

Default value

Example about clip

Default value

Example about colorScheme

columnSeriesOverlapboolean

Default value

Example about columnSeriesOverlap

crosshairsColorstring | null

Example about crosshairsColor

crosshairsDashStylestring

Default value

Example about crosshairsDashStyle

crosshairsLineWidthnumber

Default value

Example about crosshairsLineWidth

dataSource[]

Example about dataSource

descriptionstring

Default value

disabledboolean

Default value

Example about disabled

drawfunction | null

Example about draw

drawBeforefunction | null

Example about drawBefore

enableAxisTextAnimationboolean

Default value

Example about enableAxisTextAnimation

enableCrosshairsboolean

Default value

Example about enableCrosshairs

greyScaleboolean

Default value

Example about greyScale

legendLayoutobject | null

Example about legendLayout

localestring

Default value

Example about locale

localizationobject

Properties

decimalSeparatorstring

Default value

patternsobject | null

thousandsSeparatorstring

Default value

Example about localization

messagesobject