Home
Reports

RDS - Chart's

The charts page in our design system showcases a variety of chart components built with Vue.js and documented using Storybook. These components are designed to provide robust, customizable, and responsive data visualization solutions for your applications.

Explore the different chart components and their configurations to find the best fit for your data visualization needs. Each component is accompanied by comprehensive documentation and examples to help you get started quickly and efficiently.


Bar chart

The BarChart Component page in our design system features an essential UI element designed to visually represent data through bar charts. This Vue.js component offers a clear and effective way to display quantitative information, making data analysis more accessible. Comprehensive documentation in Storybook provides detailed guidance for implementation and customization, ensuring the BarChart component can be tailored to fit your specific requirements.


Gauge chart

The Gauge Chart Component page in our design system features a dynamic UI element for visualizing metrics with a gauge or dial. This Vue.js component offers an intuitive way to display performance indicators.

79.0%Targeted Sell

In attendance: 280

Pending: 60

In follow-up: 600


Line chart

The Line Chart Component page in our design system showcases a versatile UI element for visualizing data trends with clarity. This Vue.js component offers an effective way to display temporal or sequential information. Comprehensive documentation in Storybook provides detailed guidance for implementation and customization, ensuring the BarChart component can be tailored to fit your specific requirements.

Pie chart

The Pie Chart Component page in our design system presents an essential UI element for visualizing data distribution with clarity. This Vue.js component offers an intuitive way to display proportions and percentages


Stack Bar chart

The Stack Bar Chart Component page in our design system features a powerful UI element for visualizing hierarchical data in stacked bars. This Vue.js component offers an effective way to display comparisons and compositions within datasets. Detailed Storybook documentation provides comprehensive guidance for seamless implementation and customization, empowering you to tailor the Stack Bar Chart to suit specific data visualization needs.

Polar chart

The Polar Area Chart Component page in our design system showcases a versatile UI element for visualizing data distribution in a circular format. This Vue.js component offers an intuitive way to display relationships and proportions within datasets.


Donut chart (Green Them)

The Donut Chart Component page in our design system features a sleek UI element for displaying data distribution in a circular format with a central hole. This Vue.js component offers a clear and concise way to visualize proportions and relationships within datasets.

Donut chart (Blue Them)

The Donut Chart Component page in our design system features a sleek UI element for displaying data distribution in a circular format with a central hole. This Vue.js component offers a clear and concise way to visualize proportions and relationships within datasets.

Radial chart

The Radial Bar Chart Component page in our design system showcases an innovative UI element for visualizing data using concentric bars radiating from the center. This Vue.js component offers a unique and dynamic way to represent quantitative information.

January
February
March