Build React streaming data visualizations with @timeplus/vistral chart components.
npx skills add https://github.com/timeplus-io/vistral --skill vistral
Please help me install this Agent Skill. Skill: vistral Source: https://github.com/timeplus-io/vistral/tree/main/agentskill Command: npx skills add https://github.com/timeplus-io/vistral --skill vistral
This Skill helps you build real-time React data visualizations with @timeplus/vistral without getting stuck on API choice, chart specification structure, streaming update patterns, or common integration mistakes.
Use the vistral skill to generate a React VistralChart with a VistralSpec for a dark-themed live time-series chart that appends streaming rows every second.
High-intent search queries and answers about installing and using this skill.
To build live React charts for streaming data, use VistralChart and VistralSpec to define expressive streaming visualizations via a Grammar API. This approach supports line, area, interval, point, and text mark types for real-time dashboards.
The best way to append real-time data to a React dashboard chart is by using a React ref-based ChartHandle. This pattern allows you to configure temporal modes and dynamically append or replace live data rows without triggering unnecessary React re-renders.
Your streaming chart duplicates history data in React 18 Strict Mode due to improper history seeding during the double-rendering lifecycle. You need to implement Strict Mode-safe history seeding to prevent duplicate data entries when initializing your live metrics panels.
Yes, you can use the Config API instead of the Grammar API for quick React chart setup. The Config API provides a faster way to create basic charts, while the Grammar API offers more expressive and advanced customization capabilities.
You do not need custom theme registration to format axes and tooltips in streaming visualizations, as basic formatting is available by default. However, registering custom themes allows you to apply consistent styling and use g2Overrides for advanced behavior.
For a React time-series monitoring app, you can create operational dashboards, live metrics panels, entity-latest status charts, geographic charts, bar or column views, and markdown or table views. These streaming analytics views are supported by VistralSpec configurations.
reactiveExpose React hooks for data fetching, caching, and live updates.
camoneartDesign and deploy Grafana dashboards for real-time system and application metrics.
2025EmmaStream real-time cryptocurrency market data from multiple exchanges via WebSocket.
OpenCovenGuide chart type selection and dashboard design for accessible React visualizations.
