yaxis

yaxis: {
  show: boolean,
  showAlways: boolean,
  showForNullSeries: boolean,
  seriesName: string | string[],
  opposite: boolean,
  reversed: boolean,
  logarithmic: boolean,
  logBase: number,
  tickAmount: number,
  stepSize: number,
  forceNiceScale: boolean,
  min: number | ((min: number) => number),
  max: number | ((max: number) => number),
  floating: boolean,
  decimalsInFloat: number,
  labels: { ... },
    show: boolean,
    showDuplicates: boolean,
    minWidth: number,
    maxWidth: number,
    offsetX: number,
    offsetY: number,
    rotate: number,
    align: 'left' | 'center' | 'right',
    padding: number,
    style: { ... },
      colors: string | string[],
      fontSize: string,
      fontWeight: string | number,
      fontFamily: string,
      cssClass: string,
    formatter: Function,
  axisBorder: { ... },
    show: boolean,
    color: string,
    width: number,
    offsetX: number,
    offsetY: number,
  axisTicks: { ... },
    show: boolean,
    color: string,
    width: number,
    offsetX: number,
    offsetY: number,
  title: { ... },
    text: string,
    rotate: number,
    offsetX: number,
    offsetY: number,
    style: { ... },
      color: string,
      fontSize: string,
      fontWeight: string | number,
      fontFamily: string,
      cssClass: string,
  crosshairs: { ... },
    show: boolean,
    position: string,
    stroke: { ... },
      color: string,
      width: number,
      dashArray: number,
  tooltip: { ... },
    enabled: boolean,
    offsetX: number,
}

Default: true

Whether to display the y-axis or not.

Default: false

Whether to hide y-axis when user toggles series through legend.

Default: true

When turned off, it will hide the y-axis completely for a series which has no data or a series with all null values.

Default: undefined

In a multiple y-axis chart, you can target the scale of a y-axis to a particular series by referencing through the seriesName. The series item which have the same name property will be used to calculate the scale of the y-axis.

Note: You can either map a single series to y-axis or multiple series to the same y-axis.

Default: false

When enabled, will draw the yaxis on the right side of the chart

Default: false

Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers.

Default: false

A non-linear scale when there is a large range of values.

Default: 10

Controls the logarithmic base. Default is 10

Default: undefined

Number of Tick Intervals to show

Default: undefined

The lowest number to be set for the y-axis. The graph drawing beyond this number will be clipped off
You can also pass a function here which should return a number. The function accepts an argument which by default is the smallest value in the y-axis. function(min) { return min }

Default: undefined

The highest number to be set for the y-axis. The graph drawing beyond this number will be clipped off.
You can also pass a function here which should return a number. The function accepts an argument which by default is the biggest value in the y-axis. function(max) { return max }

Default: undefined

stepSize refers to the interval between consecutive values on a y-axis. It determines how the values on the axis are spaced or displayed. If the step size is set to 10, the axis might display values like 0, 10, 20, 30, and so on.

Default: false

If set to true, the y-axis scales are forced to generate nice looking rounded numbers even when min/max are provided. Turn this off if you manually set min/max and want it to be unchanged.

Default: false

Setting this options takes the y-axis out of the plotting area. Much behaves like position: absolute property of CSS

Default: undefined

The number of fractions to display when there are floating values in y-axis.
Note: If you have defined a custom formatter function in yaxis.labels.formatter, this won't have any effect.

Default: true

Show labels on y-axis

yaxis.labels.showDuplicates

Default: false

Allow duplicate labels on y-axis. Default is false

yaxis.labels.align

Default: undefined

Available Options

left
center
right

yaxis.labels.minWidth

Default: 0

Minimum width for the y-axis labels

yaxis.labels.maxWidth

Default: 160

Maximum width for the y-axis labels

yaxis.labels.style

yaxis.labels.style.colors

Default: []

ForeColor for the y-axis label

yaxis.labels.style.fontSize

Default: '11px'

FontSize for the y-axis label

yaxis.labels.style.fontFamily

Default: undefined

Font-family for the y-axis label.

yaxis.labels.style.fontWeight

Default: 400

Font-weight for the y-axis label.

yaxis.labels.style.cssClass

Default: ''

A custom Css Class to give to the label elements

yaxis.labels.offsetX

Default: 0

Sets the left offset for label

yaxis.labels.offsetY

Default: 0

Sets the top offset for label

yaxis.labels.rotate

Default: 0

Rotate y-axis text label to a specific angle from it's center

yaxis.labels.formatter

Default: undefined

Applies a custom function for the yaxis value.

yaxis: { labels: { /** * Allows users to apply a custom formatter function to yaxis labels. * * @param { String } value - The generated value of the y-axis tick * @param { index } index of the tick / currently executing iteration in yaxis labels array */ formatter: function(val, index) { return val.toFixed(2); } } }

Note: In horizantal bar charts, the second parameters also contains additional data like dataPointIndex & seriesIndex.

yaxis.axisBorder.show

Default: false

Draw a vertical border on the y-axis

yaxis.axisBorder.color

Default: '#e0e0e0'

Color of the horizontal axis border

yaxis.axisBorder.offsetX

Default: 0

Sets the left offset of the axis border

yaxis.axisBorder.offsetY

Default: 0

Sets the top offset of the axis border

yaxis.axisTicks.show

Default: false

Draw ticks on the y-axis to specify intervals

Available Options

solid
dotted

yaxis.axisTicks.color

Default: '#e0e0e0'

Color of the ticks

yaxis.axisTicks.width

Default: 6

Width of the ticks

yaxis.axisTicks.offsetX

Default: 0

Sets the left offset of the ticks

yaxis.axisTicks.offsetY

Default: 0

Sets the top offset of the ticks

Default: undefined

Number of Tick Intervals to show

Default: undefined

Lowest number to be set for the y-axis. The graph drawing beyond this number will be clipped off

Default: undefined

Highest number to be set for the y-axis. The graph drawing beyond this number will be clipped off

range takes the max value of y-axis, subtracts the provided range value and gets the min value based on that. So, technically it helps to keep the same range when min and max values gets updated dynamically

Default: false

Floating takes y-axis is taken out of normal flow and places y-axis on svg element directly, similar to an absolutely positioned element. Set the offsetX and offsetY then to adjust the position manually

Setting this option allows you to change the y-axis position Available options

bottom
top

yaxis.title.text

Default: undefined

Give the y-axis a title which will be displayed below the axis labels by default.

yaxis.title.rotate

Default: -90

Rotate the yaxis title either 90 or -90.

yaxis.title.offsetX

Default: 0

Sets the left offset for yaxis title.

yaxis.title.offsetY

Default: 0

Sets the top offset for the yaxis title.

yaxis.title.style

yaxis.title.style.color

Default: undefined

ForeColor of the y-axis title

yaxis.title.style.fontSize

Default: '11px'

FontSize for the y-axis title

yaxis.title.style.fontFamily

Default: undefined

FontFamily for the y-axis title

yaxis.title.style.fontWeight

Default: 900

Font-weight for the y-axis title

yaxis.title.style.cssClass

Default: ''

A custom Css Class to give to the y-axis title

yaxis.crosshairs.show

Default: true

Show crosshairs on y-axis when user moves the mouse over chart area. Note: Make sure to have yaxis.tooltip.enabled: 'true' to make the crosshair visible.

yaxis.crosshairs.position

Default: 'front'

Possible Options

back
front

yaxis.crosshairs.stroke

yaxis.crosshairs.stroke.color

Default: '#b6b6b6'

Border Color of crosshairs

yaxis.crosshairs.stroke.width

Default: 1

Border Width of crosshairs

yaxis.crosshairs.stroke.dashArray

Default: 0

Creates dashes in borders of crosshairs. Higher number creates more space between dashes in the border.

yaxis.tooltip.enabled

Default: false

Show tooltip on y-axis

Sets the top offset for y-axis tooltip

yaxis

Configuration Structure

#show

#showAlways

#showForNullSeries

#seriesName

#opposite

#reversed

#logarithmic

#logBase

#tickAmount

#min

#max

#stepSize

#forceNiceScale

#floating

#decimalsInFloat

#show

#showDuplicates

#align

#minWidth

#maxWidth

#style

#colors

#fontSize

#fontFamily

#fontWeight

#cssClass

#offsetX

#offsetY

#rotate

#formatter

#show

#color

#offsetX

#offsetY

#show

#borderType

#color

#width

#offsetX

#offsetY

#tickAmount

#min

#max

#range

#floating

#position

#title

#text

#rotate

#offsetX

#offsetY

#style

#color

#fontSize

#fontFamily

#fontWeight

#cssClass

#crosshairs

#show

#position

#stroke

#color

#width

#dashArray

#tooltip

#enabled

#offsetY

`show`

`showAlways`

`showForNullSeries`

`seriesName`

`opposite`

`reversed`

`logarithmic`

`logBase`

`tickAmount`

`min`

`max`

`stepSize`

`forceNiceScale`

`floating`

`decimalsInFloat`

`show`

`showDuplicates`

`align`

`minWidth`

`maxWidth`

`style`

`colors`

`fontSize`

`fontFamily`

`fontWeight`

`cssClass`

`offsetX`

`offsetY`

`rotate`

`formatter`

`show`

`color`

`offsetX`

`offsetY`

`show`

`borderType`

`color`

`width`

`offsetX`

`offsetY`

`tickAmount`

`min`

`max`

`range`

`floating`

`position`

`title`

`text`

`rotate`

`offsetX`

`offsetY`

`style`

`color`

`fontSize`

`fontFamily`

`fontWeight`

`cssClass`

`crosshairs`

`show`

`position`

`stroke`

`color`

`width`

`dashArray`

`tooltip`

`enabled`

`offsetY`