Scatter Chart overview
<tng-scatter-chart> Field-driven scatter wrapper for correlation, distribution, and bubbles.
Simple sample
Compare the Scatter Chart preset in its default plain-CSS presentation and in a theme-aware Tailwind shell.
Simple sample (Plain-CSS)
Simple sample (Tailwind CSS)
Chart metadata
| Category | Scatter |
|---|---|
| Series type | scatter |
| Coordinate system | cartesian2d |
| Features | standard preset |
Imports
Chart imports
ts
import { TngScatterChart, type TngChartData } from '@tailng-ui/charts';
const data: TngChartData = [
{"label":"Jan","value":42},
{"label":"Feb","value":58},
{"label":"Mar","value":64},
{"label":"Apr","value":86},
];Minimal usage
Standalone component
ts
@Component({
imports: [TngScatterChart],
template: `<tng-scatter-chart [data]="data" xField="label" yField="value" [height]="320" />`,
})
export class ScatterChartExample {
protected readonly data = data;
}