ptcs-chart-axis

Visual

Overview

ptcs-chart-axis is a subcomponent used to add axes to charts (one for each axis). The example listed below outlines declarations for a chart with four axes: x-axis, secondary x-axis, y-axis, and secondary y-axis. This component is nested within ptcs-chart-layout.

Usage Examples

Basic Usage

        <ptcs-chart-layout
              ...
            <ptcs-chart-axis id="xaxis" slot="xaxis" part="xaxis"
                disabled="[[disabled]]"
                type="[[_xType]]"
                spec-min="[[_specValueMin(specXMin, specXMax, xZoomStart, noXZoom, _xMin, _xMax, _xType)]]"
                spec-max="[[_specValueMax(specXMin, specXMax, xZoomEnd, noXZoom, _xMin, _xMax, _xType)]]"
                side="[[_xSide(flipXAxis, flipAxes)]]"
                label="[[xAxisLabel]]"
                align-label="[[xAxisAlign]]"
                min-value="[[_xMin]]"
                max-value="[[_xMax]]"
                size="[[_xSize(_graphWidth, _graphHeight, flipAxes)]]"
                max-size="[[_if(flipAxes, verticalAxisMaxWidth, horizontalAxisMaxHeight)]]"
                ticks="{{_xTicks}}"
                ticks-rotation="[[horizontalTicksRotation]]"
                reverse="[[reverseXAxis]]"
                scale="{{_xScale}}"
                number-format-specifier="[[xAxisNumberFormatSpecifier]]"
                date-format-token="[[xAxisDateFormatToken]]"
                hidden\$="[[hideXAxis]]"></ptcs-chart-axis>
            <ptcs-chart-axis id="xaxis2" slot="xaxis2" part="xaxis2"
                ...
            ></ptcs-chart-axis>
            <ptcs-chart-axis id="yaxis" slot="yaxis" part="yaxis"
               ...
            ></ptcs-chart-axis>
            <ptcs-chart-axis id="yaxis2" slot="yaxis2" part="yaxis2"
              ...
            ></ptcs-chart-axis>
        </ptcs-chart-layout>

Component API

Properties

Property	Type	Description	Default
type	Object	number, date, or array (of labels)	number
side	String	Specifies the axis position. Supported values: "top", "bottom", "left", or "right"	left
label	String	Axis label
alignLabel	String	Specifies the axis label alignment. Supported values: "start", "center", or "end"
minValue	Object	The minimum value in the data
maxValue	Object	The maximum value in the data
specMin	Object	The specified minimum value in the data: "baseline" | "auto" | value, where "baseline" means to start from zero if the minimum value in the data is non-negative, otherwise use "auto". "auto": Use the minimum value of the data and subtract 20% of the full range of the data. Value: start at specified value.
specMax	Object	The specified maximum value in the data: "auto" | value
numTicks	Number	Set the number of labels on the axis
size	Number	The current size / length of the axis (width or height, depending on property side)
maxSize	String	The maximum size / length of the axis
reverse	Boolean	Reverse the axis direction?
rotateTicks	Boolean	Rotate the ticks on collision?	false
scale	Function	The generated scale
scaleMin	Number	Minimum value on current scale: function(minValue, maxValue, minSpec)
scaleMax	Number	Maximum value on current scale: function(minValue, maxValue, maxSpec)
ticks	Array	Axis ticks [{label, value, offs}, ...]
dualTicks	Array	Ticks from a dual axis that this axis should synchronize to
ticksRotation	String	Only for horizontal axes: Set explicit ticks rotation in degrees, instead of using auto rotation. The allowed range is: -180 to 180. If this property is not specified, horizontal axis ticks auto-rotate 90 degrees if they collide when not rotated.
outerPadding	String	Padding before and after the chart area
innerPadding	String	Inner padding, between data in different groups
numberFormat	String	Number format specifier, has precedence over numberFormatSpecifier
numberFormatSpecifier	String	The number format (e.g. 0000.0, #% or 0.00) to use on the axis
dateFormatToken	String	The date format token (e.g. 'YYYY-MM-DD')
referenceLines	Array	Array of threshold line ticks
isReferenceLines	Boolean	Does the axis have threshold lines?

Styling

Parts

Part	Description
label-container	Container for the axis label
label	Axis label
ticks-area	Container for the axis ticks

State attributes

Attribute	Description	Part
side	Axis location (left / right / top / bottom)	:host
align-label	Label alignment (left / center / right)	:host
rotate-ticks	Rotate ticks on collision?	:host
is-reference-lines	Does the axis have threshold lines?	:host