Text Display Examples

Display text content with support for plain text, code, and custom formatting.

Type Interface

import type { BaseChartProps } from '../../types';

export interface TextProps extends BaseChartProps {
  content: string;

  // Formatting
  format?: 'plain' | 'markdown' | 'html';
  wrap?: boolean;

  // Typography
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  color?: string;

  // Layout
  align?: 'left' | 'center' | 'right' | 'justify';
  padding?: number;

  // Syntax highlighting (for code)
  language?: string;
  showLineNumbers?: boolean;
}

Plain Text

This is a demonstration of plain text rendering.

The Text component supports multiple formats:
- Plain text (with wrapping)
- Markdown text
- HTML content
- Code with syntax highlighting

You can customize:
- Font family and size
- Line height and color
- Text alignment
- Padding and layout

import { Text } from '@vuer-ai/vuer-viz';

const plainText = `This is a demonstration of plain text rendering.

The Text component supports multiple formats:
- Plain text (with wrapping)
- Markdown text
- HTML content
- Code with syntax highlighting

You can customize:
- Font family and size
- Line height and color
- Text alignment
- Padding and layout`;

export default function PlainTextExample() {
  return (
    <Text
      content={plainText}
      format="plain"
      wrap={true}
    />
  );
}

Code with Line Numbers

1function fibonacci(n: number): number {
2  if (n <= 1) return n;
3  return fibonacci(n - 1) + fibonacci(n - 2);
4}
5 
6const result = fibonacci(10);
7console.log(result); // 55

import { Text } from '@vuer-ai/vuer-viz';

const sampleCode = `function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(result); // 55`;

export default function CodeTextExample() {
  return (
    <Text
      content={sampleCode}
      language="typescript"
      showLineNumbers={true}
      wrap={false}
    />
  );
}

Centered Text

This text is centered with custom styling

import { Text } from '@vuer-ai/vuer-viz';

export default function CenteredTextExample() {
  return (
    <Text
      content="This text is centered with custom styling"
      align="center"
      fontSize={24}
      color="#3498db"
    />
  );
}

Features

Multiple format support: plain, markdown, HTML
Code syntax highlighting
Line numbers for code blocks
Text wrapping control
Custom typography (font, size, line height)
Text alignment options
Configurable padding
Scrollable content for long text

← Back to all charts