CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-swimlane--ngx-charts

Declarative charting framework for Angular that renders charts using SVG elements through Angular's binding system with extensive chart type support and D3.js integration

—

Pending
Overview
Eval results
Files

styling-theming.mddocs/

Styling & Theming

Comprehensive styling and theming system for customizing the visual appearance of ngx-charts components using CSS, color schemes, and built-in theme options.

Capabilities

Color Schemes

Pre-built color palettes optimized for data visualization with accessibility considerations.

// Color scheme interface
interface Color {
  name: string;
  selectable: boolean;
  group: ScaleType;
  domain: string[];
}

// Available color schemes from colorSets
const colorSets: { [key: string]: Color } = {
  vivid: Color,
  natural: Color,
  cool: Color,
  fire: Color,
  solar: Color,
  air: Color,
  aqua: Color,
  flame: Color,
  ocean: Color,
  forest: Color,
  horizon: Color,
  neons: Color,
  picnic: Color,
  night: Color,
  nightLights: Color
};

Color Scheme Usage:

import { Component } from '@angular/core';
import { colorSets } from '@swimlane/ngx-charts';

@Component({
  template: `
    <ngx-charts-bar-vertical
      [results]="data"
      [scheme]="colorScheme">
    </ngx-charts-bar-vertical>
  `
})
export class ThemedChartComponent {
  // Use predefined color scheme
  colorScheme = colorSets.vivid;
  
  // Or create custom color scheme
  customColorScheme = {
    name: 'customScheme',
    selectable: true,
    group: ScaleType.Ordinal,
    domain: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd']
  };
}

Custom Colors

Override specific data series colors with custom color mappings.

// Custom color configuration
@Input() customColors: any;

// Custom color array format
interface CustomColor {
  name: string;  // Data series name to match
  value: string; // Hex color value
}

// Example custom colors
const customColors: CustomColor[] = [
  { name: 'Series A', value: '#FF6B6B' },
  { name: 'Series B', value: '#4ECDC4' },
  { name: 'Series C', value: '#45B7D1' },
  { name: 'Series D', value: '#FFA07A' }
];

Custom Colors Usage:

@Component({
  template: `
    <ngx-charts-line-chart
      [results]="data"
      [customColors]="customColors">
    </ngx-charts-line-chart>
  `
})
export class CustomColorComponent {
  customColors = [
    { name: 'Revenue', value: '#5AA454' },
    { name: 'Expenses', value: '#E44D25' },
    { name: 'Profit', value: '#CFC0BB' }
  ];
}

CSS-Based Styling

Override component styles using CSS classes and CSS variables.

// Chart components expose CSS classes for styling
// Common CSS classes across components:

.ngx-charts-outer {}          // Outer chart container
.ngx-charts-background {}     // Chart background
.ngx-charts-chart-area {}     // Main chart area
.ngx-charts-legend {}         // Legend container
.ngx-charts-axis {}           // Axis containers
.ngx-charts-grid-lines {}     // Grid line elements
.ngx-charts-tooltip {}        // Tooltip container

CSS Styling Examples:

// Global chart styling
.ngx-charts-outer {
  font-family: 'Roboto', sans-serif;
}

// Customize chart background
.ngx-charts-background {
  fill: #f8f9fa;
}

// Style grid lines
.ngx-charts-grid-lines line {
  stroke: #e9ecef;
  stroke-width: 1;
  stroke-dasharray: 2, 2;
}

// Customize axis text
.ngx-charts-axis text {
  font-size: 12px;
  fill: #6c757d;
}

// Style tooltips
.ngx-charts-tooltip {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  padding: 8px 12px;
  color: white;
  font-size: 12px;
}

// Bar chart specific styling
.ngx-charts-bar rect {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ngx-charts-bar rect:hover {
  opacity: 0.8;
}

// Line chart specific styling
.ngx-charts-line {
  stroke-width: 2px;
  fill: none;
}

// Pie chart specific styling
.ngx-charts-pie-arc {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.ngx-charts-pie-arc:hover {
  transform: scale(1.05);
}

CSS Variables

Use CSS custom properties for dynamic theming.

/* Define CSS variables for theming */
:root {
  --chart-primary-color: #1f77b4;
  --chart-secondary-color: #ff7f0e;
  --chart-background: #ffffff;
  --chart-text-color: #333333;
  --chart-grid-color: #e0e0e0;
  --chart-border-radius: 4px;
  --chart-font-family: 'Inter', sans-serif;
}

/* Dark theme variables */
[data-theme='dark'] {
  --chart-primary-color: #64b5f6;
  --chart-secondary-color: #ffb74d;
  --chart-background: #1e1e1e;
  --chart-text-color: #ffffff;
  --chart-grid-color: #424242;
}

/* Apply variables to charts */
.ngx-charts-outer {
  font-family: var(--chart-font-family);
}

.ngx-charts-background {
  fill: var(--chart-background);
}

.ngx-charts-axis text {
  fill: var(--chart-text-color);
}

.ngx-charts-grid-lines line {
  stroke: var(--chart-grid-color);
}

Gradient Effects

Apply gradient fills to chart elements for enhanced visual appeal.

// Gradient configuration
@Input() gradient: boolean = false;

// When enabled, automatically generates gradients based on color scheme
// Gradients are applied to bars, areas, pie slices, and other filled elements

Gradient Usage:

@Component({
  template: `
    <!-- Enable gradients on various chart types -->
    <ngx-charts-bar-vertical [gradient]="true"></ngx-charts-bar-vertical>
    <ngx-charts-area-chart [gradient]="true"></ngx-charts-area-chart>
    <ngx-charts-pie-chart [gradient]="true"></ngx-charts-pie-chart>
  `
})
export class GradientChartsComponent {}

Animation Control

Configure animation behavior for smooth transitions and interactions.

// Animation configuration
@Input() animations: boolean = true;

// Controls various animation types:
// - Entry animations (chart loading)
// - Update animations (data changes)
// - Hover animations (interaction states)
// - Transition animations (state changes)

Animation Examples:

/* Customize animation timing */
.ngx-charts-bar rect {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.ngx-charts-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ngx-charts-outer * {
    animation: none !important;
    transition: none !important;
  }
}

Advanced Theming

Theme Composition

Create comprehensive themes by combining multiple styling approaches.

// Theme service for centralized theme management
@Injectable({
  providedIn: 'root'
})
export class ChartThemeService {
  private currentTheme = new BehaviorSubject<ChartTheme>('light');
  
  getCurrentTheme(): Observable<ChartTheme> {
    return this.currentTheme.asObservable();
  }
  
  setTheme(theme: ChartTheme): void {
    this.currentTheme.next(theme);
    this.applyTheme(theme);
  }
  
  private applyTheme(theme: ChartTheme): void {
    const root = document.documentElement;
    const themeVars = this.getThemeVariables(theme);
    
    Object.entries(themeVars).forEach(([key, value]) => {
      root.style.setProperty(key, value);
    });
  }
  
  private getThemeVariables(theme: ChartTheme): Record<string, string> {
    const themes = {
      light: {
        '--chart-background': '#ffffff',
        '--chart-text-color': '#333333',
        '--chart-grid-color': '#e0e0e0',
        '--chart-primary': '#1f77b4',
        '--chart-secondary': '#ff7f0e'
      },
      dark: {
        '--chart-background': '#1e1e1e',
        '--chart-text-color': '#ffffff', 
        '--chart-grid-color': '#424242',
        '--chart-primary': '#64b5f6',
        '--chart-secondary': '#ffb74d'
      }
    };
    
    return themes[theme];
  }
}

type ChartTheme = 'light' | 'dark';

Responsive Styling

Adapt chart styling based on screen size and container dimensions.

/* Mobile-first responsive design */
.ngx-charts-outer {
  font-size: 12px;
}

/* Tablet styles */
@media (min-width: 768px) {
  .ngx-charts-outer {
    font-size: 14px;
  }
  
  .ngx-charts-axis text {
    font-size: 12px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .ngx-charts-outer {
    font-size: 16px;
  }
  
  .ngx-charts-axis text {
    font-size: 14px;
  }
  
  .ngx-charts-legend {
    font-size: 14px;
  }
}

/* Container query support */
@container (max-width: 400px) {
  .ngx-charts-legend {
    display: none; /* Hide legend in small containers */
  }
}

Accessibility Theming

Ensure charts remain accessible across different themes and visual conditions.

/* High contrast theme */
@media (prefers-contrast: high) {
  .ngx-charts-background {
    fill: #000000;
  }
  
  .ngx-charts-axis text,
  .ngx-charts-legend text {
    fill: #ffffff;
    stroke: #ffffff;
    stroke-width: 0.5px;
  }
  
  .ngx-charts-grid-lines line {
    stroke: #ffffff;
    stroke-width: 2px;
  }
}

/* Focus indicators */
.ngx-charts-bar rect:focus,
.ngx-charts-pie-arc:focus {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

/* Color blind friendly adjustments */
.color-blind-friendly {
  --chart-color-1: #1f77b4; /* Blue */
  --chart-color-2: #ff7f0e; /* Orange */
  --chart-color-3: #2ca02c; /* Green */
  --chart-color-4: #d62728; /* Red */
  --chart-color-5: #9467bd; /* Purple */
}

Component-Specific Styling

Legend Styling

.ngx-charts-legend {
  .legend-labels {
    font-size: 12px;
    line-height: 20px;
  }
  
  .legend-label-color {
    border-radius: 2px;
    margin-right: 8px;
  }
  
  .legend-title-text {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
  }
}

Tooltip Styling

.ngx-charts-tooltip-content {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  padding: 12px 16px;
  color: white;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  .tooltip-label {
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .tooltip-val {
    font-size: 16px;
    font-weight: 400;
  }
}

Performance Considerations

Optimizing Animations

/* Use transform and opacity for better performance */
.ngx-charts-bar rect {
  will-change: transform, opacity;
  transform: translateZ(0); /* Enable hardware acceleration */
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
  .ngx-charts-outer {
    --animation-duration: 0.2s; /* Faster animations on mobile */
  }
}

Efficient Color Schemes

// Optimize color schemes for performance
const optimizedColorScheme = {
  name: 'performance',
  selectable: true,
  group: ScaleType.Ordinal,
  domain: [
    '#3498db', '#e74c3c', '#2ecc71', '#f39c12', 
    '#9b59b6', '#1abc9c', '#34495e', '#e67e22'
  ]
};

// Use fewer colors for better performance with large datasets
const minimalColors = {
  domain: ['#3498db', '#e74c3c', '#2ecc71']
};

Install with Tessl CLI

npx tessl i tessl/npm-swimlane--ngx-charts

docs

area-charts.md

bar-charts.md

gauge-charts.md

index.md

line-charts.md

other-charts.md

pie-charts.md

styling-theming.md

tile.json