Scatter Chart styling
Scatter Chart presets read palette, axis, and text variables from the host. Tune colors on tng-scatter-chart or adjust generated options through optionOverride.
Theme variables
| Variable | Fallback chain | Used for |
|---|---|---|
--tng-chart-background | --tng-semantic-background-canvas -> --tng-semantic-background-base -> --color-bg | ECharts background color for the plot. |
--tng-chart-surface | --tng-semantic-background-surface -> --color-surface | Surface fallback used by tooltip and chart chrome. |
--tng-chart-fg | --tng-semantic-foreground-primary -> --color-fg | Primary ECharts text color. |
--tng-chart-muted | --tng-semantic-foreground-muted -> --tng-semantic-foreground-secondary -> --color-muted | Legend text, muted text, and secondary labels. |
--tng-chart-border | --tng-semantic-border-subtle -> --tng-semantic-border-default -> --color-border | Shared border fallback for axes, grid, and tooltip borders. |
--tng-chart-axis-label | --tng-semantic-foreground-muted -> --tng-semantic-foreground-secondary -> --color-muted | Axis tick label color. |
--tng-chart-axis-line | --tng-chart-border -> --tng-semantic-border-subtle -> --tng-semantic-border-default -> --color-border | Axis line and tick color. |
--tng-chart-grid-line | --tng-chart-border -> --tng-semantic-border-subtle -> --tng-semantic-border-default -> --color-border | Split line color for cartesian charts. |
--tng-chart-tooltip-bg | --tng-chart-surface -> --tng-semantic-background-surface -> --color-surface | Tooltip background color. |
--tng-chart-tooltip-border | --tng-chart-border -> --tng-semantic-border-subtle -> --tng-semantic-border-default -> --color-border | Tooltip border color. |
--tng-chart-series-1 | --tng-semantic-accent-brand -> --color-primary | First palette color for series, slices, or points. |
--tng-chart-series-2 | --tng-semantic-accent-success -> --color-success | Second palette color. |
--tng-chart-series-3 | --tng-semantic-accent-warning -> --color-warning | Third palette color. |
--tng-chart-series-4 | --tng-semantic-accent-danger -> --color-danger | Fourth palette color. |
--tng-chart-heatmap-low | --tng-semantic-background-muted -> --tng-semantic-background-surface -> --color-surface | Low value color in heatmap visual maps. |
--tng-chart-heatmap-mid | --tng-chart-info -> --color-info -> --tng-color-sky500 -> --tng-color-cyan500 | Mid value color in heatmap visual maps. |
--tng-chart-heatmap-high | --tng-semantic-accent-brand -> --color-primary | High value color in heatmap visual maps. |
CSS starter
Chart theme variables
css
.analytics-panel tng-scatter-chart {
--tng-chart-background: var(--tng-semantic-background-base);
--tng-chart-surface: var(--tng-semantic-background-surface);
--tng-chart-fg: var(--tng-semantic-foreground-primary);
--tng-chart-muted: var(--tng-semantic-foreground-secondary);
--tng-chart-border: var(--tng-semantic-border-subtle);
--tng-chart-axis-label: var(--tng-semantic-foreground-secondary);
--tng-chart-axis-line: var(--tng-semantic-border-default);
--tng-chart-grid-line: color-mix(in srgb, var(--tng-semantic-border-subtle) 70%, transparent);
}Option overrides
Use optionOverride when the generated preset needs ECharts-specific styling for series, labels, or emphasis states.
Option override
ts
import type { TngChartOptionOverride } from '@tailng-ui/charts';
protected readonly chartOptionOverride: TngChartOptionOverride = (option) => ({
...option,
series: (option['series'] as unknown[] | undefined)?.map((series) => ({
...(series as Record<string, unknown>),
lineStyle: { width: 3 },
symbolSize: 8,
})),
});