Guides

In-depth guides for advanced Vuer-Viz techniques and patterns

Interactive Features

Event Handling

Add interactivity to your charts with event handling, cursor tracking, and synchronized multi-chart views. Learn how to use the onChange event and overlay components like VerticalMarker and Tooltip.

Markers & Ranges

Annotate your charts with threshold markers, range selections, event indicators, and custom SVG overlays. Learn how to highlight important data points, regions, and events in your visualizations.

Chart Customization

Styling Charts

Learn how to customize the appearance of your charts to match your publication or presentation style.

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

<LineChart
  series={data}
  width={770}
  height={600}
  fontSize={20}
  fontFamily="Arial, sans-serif"
  grid={true}
  gridColor="#e0e0e0"
/>

Custom Colors

Each chart type supports custom colors through props:

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

const data = [
  { label: 'Q1', value: 120, color: '#0000ff' },
  { label: 'Q2', value: 145, color: '#00ff00' },
  { label: 'Q3', value: 98, color: '#ff0000' },
  { label: 'Q4', value: 178, color: '#ffff00' },
];

<BarChart data={data} barColor="#3498db" />

Performance Optimization

Use React.memo for Large Datasets

Prevent unnecessary re-renders when working with large datasets:

const MemoizedChart = React.memo(LineChart);

function Dashboard() {
  const [time, setTime] = useState(0);
  const staticData = useMemo(() => generateData(), []);

  return <MemoizedChart series={staticData} />;
}

Optimize Animation Updates

When animating charts, use efficient update patterns:

function AnimatedChart() {
  const [data, setData] = useState(initialData);

  useEffect(() => {
    const interval = setInterval(() => {
      setData(current => updateData(current));
    }, 100);

    return () => clearInterval(interval);
  }, []);

  return <LineChart series={data} />;
}

Chart Composition

Combining Multiple Charts

Create dashboard layouts by combining multiple chart types:

function Dashboard() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      <BarChart data={salesData} title="Sales by Category" />
      <LineChart series={trendData} title="Revenue Trend" />
      <Image src="/chart.png" caption="Market Analysis" />
      <Text content="Summary statistics..." />
    </div>
  );
}

Export and Saving

Exporting Charts as Images

Save your charts for use in publications:

function ExportableChart() {
  const chartRef = useRef(null);

  const exportAsImage = () => {
    const svg = chartRef.current.querySelector('svg');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Convert SVG to canvas
    const data = new XMLSerializer().serializeToString(svg);
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      // Download
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'chart.png';
        a.click();
      });
    };
    img.src = 'data:image/svg+xml;base64,' + btoa(data);
  };

  return (
    <div ref={chartRef}>
      <LineChart series={data} />
      <button onClick={exportAsImage}>Export as PNG</button>
    </div>
  );
}

Accessibility

Adding ARIA Labels

Make your charts accessible:

<div role="img" aria-label="Bar chart showing quarterly sales data">
  <BarChart data={quarterlyData} />
</div>

Providing Alternative Text

Always include text alternatives:

<figure>
  <LineChart series={data} title="Temperature Over Time" />
  <figcaption>
    Line chart showing temperature measurements from January to December,
    with temperatures ranging from 0°C to 30°C.
  </figcaption>
</figure>

Debugging Tips

Common Issues and Solutions

• Charts not rendering: Check that width and height are provided
• Data not updating: Ensure data references change when updating
• Performance issues: Use React.memo and useMemo for expensive calculations
• Styling conflicts: Use specific className props to avoid CSS conflicts

Debug Mode

Enable development warnings:

// In development
if (process.env.NODE_ENV === 'development') {
  console.log('Chart data:', data);
  console.log('Chart dimensions:', { width, height });
}