Axis

Axis options allow a more detailed configuration over the visualization axis. They can be defined as shown below:

var axis = { yAxis: {...}, xAxis: {...} }
myChart.set(axis)

//or

myChart.set('yAxis', {...})

Options

The supported options are the following:

label

Sets a custom label for the specified axis

myChart.set('xAxis', { label: 'My Custom Label' })

labelGap

Sets the distance between axis name and axis line

myChart.set('xAxis', { label: 'My Custom Label' , labelGap: 10 })
myChart.set('yAxis', { labelGap: 70 })

type

Sets what type of values are going to be used. Accepts 'log' or 'values' which is the default.

myChart.set('yAxis', { type: 'log'}) 

show

Hides or show the specified axis

myChart.set('xAxis', { show: false }) 

min / max

Sets min and/or max values for the specified axis

myChart.set('yAxis', { max: 100000, min: 20000 })

lines

Hides or displays the grid lines for the specified axis

myChart.set('yAxis', { lines: false })
myChart.set('xAxis', { lines: false })

position

Allows to change the axis position. Available values for x-axis are top and bottom, the default value is bottom. Available values for y-axis are left and right, the default value is left.

myChart.set('xAxis', { position: "top" })
myChart.set('yAxis', { position: "right" })

rotate

Allows changing the axis tick label rotation degree, which is especially useful when there is no enough space for the category axis. The supported values are -90 to 90.

myChart.set('xAxis', { rotate: -90 })
myChart.set('yAxis', { rotate: 45 })

center

Allows to center the bars when we have negative values in the axis. By default the axis is not centered.

myChart.set('xAxis', { center: true })

Note

This property is only supported for the Bar chart. To center the axis on other charts (e.g. Trend), set the min/max to the same negative and positive values respectively. Example: .set("yAxis", {min: -50000, max: 50000})

Echarts custom options

For more flexibility, axis options support Echart xAxis and yAxis custom properties to be passed directly.

The following is an example of how to configure an axis with some of those properties:

.set("xAxis", {
    show: true,
    lines: {
      lineStyle: {
        color: "rgba(228, 23, 23, 1)",
      },
      show: true,
    },
    axisLine: {
      lineStyle: {
        color: "green",
      },
    },
    axisTick: {
      lineStyle: {
        color: "red",
      },
    },
    axisLabel: {
      fontSize: 12,
      color: "red",
    },
  })
  .set("yAxis", {
    show: true,
    splitLine: true,
    axisLine: {
      lineStyle: {
        color: "red",
      },
    },
    axisTick: {
      lineStyle: {
        color: "red",
      },
    },
    axisLabel: {
      fontSize: 12,
      margin: 11,
    },
  });

The previous configuration used in a Bar chart, will be rendered like this:

Chart support

Chart	label	log type	show	min / max	lines	position	rotate	center
Area Line	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
Bars	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Bars and Line	Yes	No	Yes	Yes	Yes	Yes	Yes	No
Box Plot	Yes	Yes	Yes	No	Yes	Yes	Yes	No
Floating Bubbles	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
Histogram	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
Multigroup Trend	Yes	No	Yes	Yes	Yes	Yes	Yes	No
Multimetric Area Line	Yes	No	Yes	Yes	Yes	Yes	Yes	No
Multimetric Bars	Yes	No	Yes	Yes	Yes	Yes	Yes	No
Multimetric Trend	Yes	No	Yes	Yes	Yes	Yes	Yes	No
Scatter Plot	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
Trend	Yes	No	Yes	Yes	Yes	Yes	Yes	No