Touch and selection

Touch the data

Tap a point to open its tooltip. Tap the selected point again to clear it, or tap another visible point to change the selection. Tapping the floating tooltip itself only closes it: a point underneath is not selected by that same touch. Drag across an unscrolled plot to explore nearby values and release to keep the selection.

Cancel a gesture

If the system interrupts a drag, the chart returns to the last committed selection. You do not need to restore it from your application.

Choose how to show detail

Choose floating to place detail near a point, docked to keep a panel below the chart, or off when your screen already shows the selected value. Docked mode shows a prompt when no point is selected. The crosshair is a selection guide; reference lines belong to the axes configuration. This example compares two series and allows the detail to be pinned.

import {Component, signal} from '@angular/core';
import {NativeDataChart, NativeChartType, type NativeLineData, type NativeChartOptions}
  from '@neural-charts/native';

const visits = {
  type: NativeChartType.Line,
  axes: {x: {type: 'category', values: [
    {id: 'mon', label: 'Mon'}, {id: 'tue', label: 'Tue'},
    {id: 'wed', label: 'Wed'}, {id: 'thu', label: 'Thu'},
    {id: 'fri', label: 'Fri'}, {id: 'sat', label: 'Sat'},
    {id: 'sun', label: 'Sun'},
  ]}, y: {type: 'linear'}},
  series: [
    {id: 'visits', name: 'This week', data: [
      {id: 'mon', x: 'mon', y: 29}, {id: 'tue', x: 'tue', y: 35},
      {id: 'wed', x: 'wed', y: 31}, {id: 'thu', x: 'thu', y: 46},
      {id: 'fri', x: 'fri', y: 42}, {id: 'sat', x: 'sat', y: 57},
      {id: 'sun', x: 'sun', y: 64},
    ]},
    {id: 'comparison', name: 'Previous week', data: [
      {id: 'mon', x: 'mon', y: 20}, {id: 'tue', x: 'tue', y: 25},
      {id: 'wed', x: 'wed', y: 22}, {id: 'thu', x: 'thu', y: 30},
      {id: 'fri', x: 'fri', y: 36}, {id: 'sat', x: 'sat', y: 34},
      {id: 'sun', x: 'sun', y: 44},
    ]},
  ],
} as const satisfies NativeLineData;

@Component({
  selector: 'app-chart-screen',
  imports: [NativeDataChart],
  template: '<neu-c-chart [data]="data()" [options]="options()" />',
})
export class ChartScreen {
  readonly data = signal<NativeLineData>(visits);
  readonly options = signal<NativeChartOptions<NativeChartType.Line>>({
    title: 'Weekly visits',
    tooltip: {mode: 'floating', content: 'shared', pinnable: true, crosshair: true},
  });
}

Keep wide charts readable

Set appearance.minPlotWidth when categories need more space. Only the plot scrolls horizontally; titles, legend and controls stay within the screen. In a scrolling chart, drag to move the plot and tap to select a value. Choose a minimum width for the actual task instead of widening every chart.

import {Component, signal} from '@angular/core';
import {NativeDataChart, NativeChartType, type NativeLineData, type NativeChartOptions}
  from '@neural-charts/native';

const visits = {
  type: NativeChartType.Line,
  axes: {x: {type: 'category', values: [
    {id: 'mon', label: 'Mon'}, {id: 'tue', label: 'Tue'},
    {id: 'wed', label: 'Wed'}, {id: 'thu', label: 'Thu'},
    {id: 'fri', label: 'Fri'}, {id: 'sat', label: 'Sat'},
    {id: 'sun', label: 'Sun'},
  ]}, y: {type: 'linear'}},
  series: [
    {id: 'visits', name: 'This week', data: [
      {id: 'mon', x: 'mon', y: 29}, {id: 'tue', x: 'tue', y: 35},
      {id: 'wed', x: 'wed', y: 31}, {id: 'thu', x: 'thu', y: 46},
      {id: 'fri', x: 'fri', y: 42}, {id: 'sat', x: 'sat', y: 57},
      {id: 'sun', x: 'sun', y: 64},
    ]},
    {id: 'comparison', name: 'Previous week', data: [
      {id: 'mon', x: 'mon', y: 20}, {id: 'tue', x: 'tue', y: 25},
      {id: 'wed', x: 'wed', y: 22}, {id: 'thu', x: 'thu', y: 30},
      {id: 'fri', x: 'fri', y: 36}, {id: 'sat', x: 'sat', y: 34},
      {id: 'sun', x: 'sun', y: 44},
    ]},
  ],
} as const satisfies NativeLineData;

@Component({
  selector: 'app-chart-screen',
  imports: [NativeDataChart],
  template: '<neu-c-chart [data]="data()" [options]="options()" />',
})
export class ChartScreen {
  readonly data = signal<NativeLineData>(visits);
  readonly options = signal<NativeChartOptions<NativeChartType.Line>>({
    title: 'Weekly visits',
    appearance: {plotHeight: 260, minPlotWidth: 640},
  });
}

Show and hide series

The interactive legend manages visibility automatically. Bind hiddenSeriesIds only when your application also needs to control or save that choice. Hiding selected data clears its detail; showing a series restores its original observations.