Custom positions for axis labels/ticks

[dvdkon]

What problem does this feature solve?

I want to be able to define custom locations for labels and ticks on axes. Currently, they are always positioned monotonically based on an interval. My use case for this is pointing out interesting events, like important train stops in the below example or important events on a time-series chart (e.g. "ad posted to Twitter" on a chart of site visits).

Desired outcome:

I can currently achieve this kind of effect with ECharts, but it's incredibly hacky and works by using a category axis with most category names as empty strings. (code). My objection isn't just that the code is ugly, getting the precision needed to zoom on data would require a category axis with possibly hundreds of thousands of values.

What does the proposed API look like?

options = {
  xAxis: {
    type: "value",
    axisLabel: {
      // If this is defined, no labels will be autogenerated.
      custom: [
        8, // A label will appear on axis value 8
        10,
      ],
      // The label text will be set through formatter as before
    },
    // Same for ticks
    axisTick: {
      custom: [8, 10, 12],
    },
  },
}

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[ethannguyen276]

Hi, is there any update on this? I also would need this feature.

[CavalcanteLeo]

im looking for this too

[sarabisohrab]

Hi, it would be great to have such useful feture!

[andrius-kurtinaitis]

Yes. It is unexpected I cannot decide exact positions for my labels. My suggestion is to allow custom to accept a function which returns array of labels based on zoom, chart width etc.

[EggTronic]

looking for this

[praful-hunde]

I want to add the label on X Axis at the locations of the dotted lines. The proposed feature will help in this case.

[fasergeyte]

Hi, is there any update on this?

[FirokOtaku]

@praful-hunde a temporary solution: use image as markLine symbol

Here I'm creating a canvas element for drawing image then convert it into dataURL. Or you could convert any other image into dataURL too.

// create canvas and resize it
const domCanvas = document.createElement('canvas')
domCanvas.width = 56
domCanvas.height = 24

// draw anything on it
const ctx = domCanvas.getContext('2d')
ctx.font = '24px serif'
ctx.fillStyle = 'red'
ctx.fillText('30', 0, 24)

// convert into dataURL
const dataurlImg = domCanvas.toDataURL()
window.dataurlImg = dataurlImg

chart option:

series: [
  {
    ...
    markLine: {
      symbol: ['image://' + window?.dataurlImg, null], // set label only for one side
      symbolSize: [28, 12], // scale a big picture into smaller size for clearity
      symbolRotate: [0, 0],
      symbolOffset: [[0, -2], [0,0]],
      ...
    },

preview:

not looks very good, but it just works for some cases (at least my case).

[acsabi310]

It would be really good to have something like this. For now, when an axis is typed as 'value' with for example min: 0 max: 120, in the axisLabel's formatter callback function I just got 0,20,40,...,120 for the values. If I could get all the integer values, I could write my own logic to show specific labels. Supporting the 'interval' property would be beneficial too. So I could have something like this:

UPDATE: nvm, I could solve this with an invisible "value" axis and a visible "category" axis.

[jlefeaux]

I was able to do this by hiding the x-axis labels and adding vertical marklines.

markLine: {
      data: stages.map(stage => ({
        xAxis: stage,
      })),
      symbol: "none",
      label: {
        position: "start",
        formatter: params => (params.value === +stages.at(-1) ? "Close" : params.value),
      },
},