Customization

Show or truncate labels

Automatic layout skips labels that would collide. Choose all to retain every available label even if they overlap, or truncate to keep the same labels and shorten long text with an ellipsis. Configure data labels and Cartesian axis labels independently.

  • Enable appearance.dataLabels to see data labels. Forced modes draw up to 256 available labels in the visible plot. Axis labels follow the ticks calculated for the current scale.
  • Truncation only affects the drawn label. Tooltips, selection and the original data retain their full values. The component API shows which settings each chart supports.
import type {NativeChartOptions} from '@neural-charts/native';

const options = {
  appearance: {
    dataLabels: true,
    dataLabelLayout: 'all',
    axisLabelLayout: 'truncate',
  },
} satisfies NativeChartOptions<'line'>;

Tooltip template

Import NativeChartTooltipTemplate in the TypeScript file and add it to the screen’s @Component.imports. Place the ng-template with neuChartTooltip inside <neu-c-chart> and set options.tooltip.mode to docked. The complete example includes the native Text and View components and the styles for the detail.

  • let-point gives you the active observation, including its IDs, value and series. Use let-unit="unit" and let-locale="locale" for units and language.
  • The context also exposes shared, pinned and scrubbing. Use tooltip.content to choose point or shared detail when the family supports both.

Legend labels and position

The demo adds a diamond to the label of the visits series. The formatter receives id, name, text, color and visible. Set legend.position to top, bottom, left or right. Use legend.visible to hide the legend and legend.interactive to control whether it toggles series.

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

class ChartScreen {
  readonly formatters: NativeChartLabelFormatters = {
    legendLabel: ({id, text}) => id === 'visits' ? '◆ ' + text : undefined,
  };
}

X and Y axes

In the demo, day abbreviations end in a dot and numeric ticks include a unit. Formatters receive axis, text, value and type. Return undefined to keep the chart’s text. The Y formatter also receives axis === "secondaryY" in a mixed chart with two scales.

  • Use axes.x and axes.y to set visible, title and titleStyle. Use axes.grid for the grid.
  • The 50-unit dashed line uses referenceLines and the shaded 50–65 interval uses referenceBands. Use the units represented on the axis.
import type {NativeChartLabelFormatters} from '@neural-charts/native';

class ChartScreen {
  readonly formatters: NativeChartLabelFormatters = {
    xAxisLabel: ({text}) => text + '.',
    yAxisLabel: ({axis, text, type}) => axis === 'y' && type === 'number' ? text + ' u.' : undefined,
  };
}

Data labels

The labels #1 to #7 come from each point’s original position. Build a lookup using series ID and point ID, then read it from labelFormatters.dataLabel. The same point keeps its number as you zoom. The callback also receives value and the default text.

  • Enable appearance.dataLabels. The renderer fits the formatted text and can omit labels that do not fit.

Series, markers and point colours

Set series colours and names by ID. The demo uses a thicker line, nine-pixel diamond markers and an appearance.points rule that turns each marker red at 50 units. Each override takes seriesId, pointId and color.

  • With markers you can set visibility, shape, diameter, fillColor, borderColor and borderWidth on supported line families.

Title, theme and size

The demo centres the title and subtitle, styles the title independently and uses the showcase’s current theme. Use appearance.title and appearance.subtitle for colour, alignment, weight and size. Use appearance.theme for light, dark or system, appearance.locale for built-in text and plotHeight for plot height.

Make the threshold readable

The tooltip gives the point value and explains whether it meets the threshold. Try Previous and Next to read the same information without relying on marker colour.

Sector labels in pie and donut charts

Pie and donut use the same formatter. The context’s value is the percentage of the visible total, text is the formatted percentage, and point.value is the original amount. This example shows the amount inside each sector. Return undefined to keep the percentage.

  • With data labels enabled, the renderer places labels on sectors of at least 5% when there are no more than eight visible observations. The original amounts remain available in the tooltip.
import {Component, input} from '@angular/core';
import {NativeDataChart, type NativeChartLabelFormatters,
  type NativeDonutData, type NativePieData} from '@neural-charts/native';

@Component({
  selector: 'app-sector-labels-chart',
  imports: [NativeDataChart],
  template: `
    <neu-c-chart [data]="data()" [options]="options" [labelFormatters]="formatters" />
  `,
})
export class SectorLabelsChart {
  readonly data = input.required<NativePieData | NativeDonutData>();
  readonly options = {appearance: {dataLabels: true}} as const;
  private readonly number = new Intl.NumberFormat('en');
  readonly formatters: NativeChartLabelFormatters = {
    dataLabel: ({point}) => this.number.format(point.value),
  };
}

Colour scales in heatmaps

Use a continuous scale to interpolate colours between stops in a numeric domain. Use classes to assign a fixed colour and label to each value interval. Both demos include the scale configuration in View example code.

Visual options by chart type

The chart type determines the available scales, shapes and layout. These demos show the live result and include the corresponding TypeScript under View example code. The API section on each page lists the supported options.