Skip to content

Add showForNull (or similar) to option.tooltip so tooltips appear for null/NaN values #5099

@aldocarrolo

Description

@aldocarrolo

Summary

Please add a parameter to option.tooltip that allows tooltips to be shown for data points whose value is null/NaN. This would enable users to surface useful context (e.g., “No data reported”, “Sensor offline”, or custom fallback text) when hovering or focusing points with missing values.

API Changes

Introduce a new boolean flag:

option.tooltip.showForNull = false; // default

Behavior:

  • When showForNull: true, hovering/focusing a datum with value === null (or Number.isNaN(value) === true) should still trigger the tooltip.
  • The formatter should be called with the usual params, plus a hint that the datum is null. For example:
    • params.value remains null
    • Optionally add params.isNull === true (or expose via params.data == null), so formatters can branch cleanly.
  • This should work consistently across series types (line, bar, scatter, heatmap, etc.) and with connectNulls: true/false.
  • Keyboard focus and touch interactions should mirror hover behavior for accessibility.

Intended Use Case

const option = {
  tooltip: {
    show: true,
    showForNull: true,
    formatter: (params) => {
      const label = params.axisValueLabel ?? params.name ?? '';
      if (params.value == null || Number.isNaN(params.value)) {
        return `No data for <b>${label}</b>`;
      }
      return `${params.seriesName}: <b>${params.value}</b>`;
    }
  },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{
    name: 'Visitors',
    type: 'line',
    connectNulls: false,
    data: [820, null, 901, null, 1290]
  }]
};

Expected results

Hovering over Tue and Thu shows a tooltip like “No data for Tue/Thu” instead of nothing.

Use cases

  • Time series with gaps (e.g., telemetry outages, holidays, late-arriving data).
  • Dashboards that must explain why a point is missing rather than silently omitting it.
  • Accessibility: screen-reader users and keyboard navigation benefit from explicit messaging for nulls.
  • Auditing: clarify whether gaps are intentional (e.g., not applicable) or errors (e.g., failed ingestion).

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