Accessibility

Show or hide the selection buttons

Charts show Previous, Next and Clear by default. Set interaction.selectionControls to false in compact screens or layouts with several charts. Touch selection and the screen reader’s native actions stay available. In the web demos, focus the plot and use the arrow keys to explore, Home or End to jump to the first or last observation, and Escape to clear the selection. Zoom controls and the actions for reading or pinning the tooltip are configured separately.

In NativeChartPanels, set the flag under options.interaction for all panels or under options.panels[id].interaction for one panel.

import type {NativeChartOptions} from '@neural-charts/native';

const options = {
  interaction: {selectionControls: false},
} satisfies NativeChartOptions<'line'>;

Read values without relying on colour

Previous/Next and native screen-reader actions navigate the same original observations as touch. The selected label, value and series name are available as text. Give your chart a meaningful title and each series a clear name.

Respect system preferences

The component observes screen-reader, text-size and reduced-motion settings. Reduced motion shows the final animation state immediately. Use interaction.haptics: false when your app offers a silent interaction preference. The source tables on this documentation website are an additional way to inspect its demo data.

Choose readable colours

Choose series colours that remain distinguishable on your chart surface. Keep visible names, legends and values so colour is not the only clue. This dark-theme example uses two distinct series colours, optional value labels and disabled haptics; adapt the series IDs to your data.

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: {
      theme: 'dark', dataLabels: true,
      series: [{id: 'visits', color: '#60A5FA'}, {id: 'comparison', color: '#FBBF24'}],
    },
    interaction: {haptics: false},
  });
}

Keep axis labels readable