Added tick to documentation of custom axis label formatter function

[ptandler]

I was wondering how the internal axis formatter is able to render more significant labels in bold. Looking at the source I found that the formatter function is passed a 3rd argument with information about the tick that is missing in the documentation.

[ptandler]

See also https://stackoverflow.com/questions/75220041/can-a-echarts-formatter-function-use-the-existing-cascading-templates-functional/75232567

[Ovilia]

I failed to reproduce the case that returns tick information. Can you provide a demo?

[ptandler]

I failed to reproduce the case that returns tick information. Can you provide a demo?

This example is the extended version of the formatter example from the docs: The tick parameter is used to render some date ticks as bold:

See also live example on codesandbox.io

option = {
  xAxis: [
    {
      id: 'dfa916b1-f8ef-f856-ff55-d69a95af6152',
      show: true,
      position: 'bottom',
      axisLabel: {
        show: true,
        showMaxLabel: true,
        showMinLabel: true,
        width: 40,
        formatter: function (value, index, tick) {
          // Formatted to be month/day; display year only in the first label
          var date = new Date(value);
          var texts = [date.getMonth() + 1, date.getDate()];
          if (index === 0) {
            texts.unshift(date.getFullYear());
          }
          let label = texts.join('/');
          // apply bold style via rich text for significant levels, i.e. `level > 0`
          return tick.level ? `{bold|${label}}` : label;
        },
        rich: {
          year: {
            color: 'rgb(48, 91, 116)',
            fontWeight: 'bold',
            fontSize: '120%'
          },
          bold: {
            fontWeight: 'bold'
          },
          weekend: {
            fontStyle: 'italic'
          },
          boldWeekend: {
            fontWeight: 'bold',
            fontStyle: 'italic'
          }
        }
      },
      name: 't',
      nameLocation: 'end',
      nameGap: 20,
      nameTextStyle: {
        align: 'left'
      },
      axisLine: {
        show: true,
        onZero: false
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: true
      },
      axisPointer: {
        show: true,
        type: 'line',
        label: {
          show: true,
          color: '#2d556d',
          backgroundColor: '#b4d0e0',
          borderColor: '#8cb6cf',
          borderWidth: 2,
          margin: 10
        }
      },
      mainType: 'xAxis',
      type: 'time',
      offset: 0
    }
  ],
  yAxis: [
    {
      id: '55ec9133-ba37-c3d8-2e4b-6d634613c69c',
      show: true,
      position: 'left',
      axisLabel: {
        show: true,
        showMaxLabel: true,
        showMinLabel: true,
        width: 40,
        overflow: 'break'
      },
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitNumber: 1,
      minorTick: {
        show: true,
        splitNumber: 5
      },
      splitLine: {
        show: true
      },
      axisPointer: {
        show: true,
        type: 'line',
        label: {
          show: true,
          color: '#2d556d',
          backgroundColor: '#b4d0e0',
          borderColor: '#8cb6cf',
          borderWidth: 2,
          margin: 10
        }
      },
      mainType: 'yAxis',
      type: 'value',
      offset: 0
    }
  ],
  series: [
    {
      id: '7b658b96-ab59-ab22-1924-a59ec621f596',
      name: 'Darmstadt - Temperature [°C] (virtual series) / Last 3 días',
      data: [
        ['2024-03-02T08:00:00Z', 5.08264525731405],
        ['2024-03-02T12:00:00Z', 13.6974339485168],
        ['2024-03-02T16:00:00Z', 12.289484500885],
        ['2024-03-02T20:00:00Z', 9.67758822441101],
        ['2024-03-03T00:00:00Z', 7.33047235012054],
        ['2024-03-03T04:00:00Z', 6.28126227855682],
        ['2024-03-03T08:00:00Z', 11.1200497150421],
        ['2024-03-03T12:00:00Z', 15.5546424388885],
        ['2024-03-03T16:00:00Z', 12.8419029712677],
        ['2024-03-03T20:00:00Z', 8.58745622634888],
        ['2024-03-04T00:00:00Z', 7.07555794715881],
        ['2024-03-04T04:00:00Z', 7.13577568531036],
        ['2024-03-04T08:00:00Z', 8.97432243824005],
        ['2024-03-04T12:00:00Z', 9.88433504104614],
        ['2024-03-04T16:00:00Z', 8.79031586647034],
        ['2024-03-04T20:00:00Z', 8.11856067180634],
        ['2024-03-05T00:00:00Z', 7.45793902873993],
        ['2024-03-05T04:00:00Z', 7.16026902198792],
        ['2024-03-05T08:00:00Z', 8.028756091143]
      ],
      type: 'line',
      xAxisId: 'dfa916b1-f8ef-f856-ff55-d69a95af6152',
      yAxisId: '55ec9133-ba37-c3d8-2e4b-6d634613c69c'
    }
  ],
  dataZoom: [
    {
      filterMode: 'none',
      xAxisIndex: 0,
      type: 'inside',
      zoomOnMouseWheel: 'ctrl',
      moveOnMouseMove: true,
      moveOnMouseWheel: true
    },
    {
      filterMode: 'none',
      yAxisIndex: 0,
      type: 'inside',
      zoomOnMouseWheel: 'alt',
      moveOnMouseMove: true,
      moveOnMouseWheel: 'shift'
    },
    {
      filterMode: 'none',
      yAxisIndex: 1,
      type: 'inside',
      zoomOnMouseWheel: 'alt',
      moveOnMouseMove: true,
      moveOnMouseWheel: 'shift'
    }
  ]
};