Skip to content

Custom positions for axis labels/ticks #13627

@dvdkon

Description

@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:
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],
    },
  },
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions