XCharts – Charts and Tables for Financial SaaS Dashboard

Disclaimer

Dear customers, this is only a frontend react template, there is no backend script. Please take this into consideration when you decide to purchase our Admin UI Template.

Description

XCharts is your go-to solution for creating stunning and functional financial dashboards. Our pre-built templates offer a competitive edge, helping you attract users and investors. Save time and resources while delivering top-notch SaaS products that meet the demands of the dynamic finance and crypto industry.

Technologies

• Component-Based Architecture: We coded with React’s component-based architecture to build modular and reusable components.
• Type Safety: We used TypeScript to add type safety across the application, reducing runtime errors and improving maintainability.
• Styling: We used SCSS/SASS for styling to keep styles organized and maintainable.
• State Management: We implemented Redux for state management to keep the application state predictable and manageable.
• Performance Optimization: We utilized Vite for faster builds and better performance during development.
• Data Visualization: We integrated HighCharts.js and Charts.js to provide insightful and interactive data visualizations.
• Responsive Tables: We used React with pre built advanced filters to create dynamic and type-safe tables for displaying data.

Template Key Features

• 55+ Screens
• 3 unique theme options
• Fully Responsive Design
• Based on comprehensive UX research
• Design System with fully scalable components
• Easy Customization
• Comprehensive Documentation

Sources and Credits

• React 18 + TypeScript:TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project.
• Vite:A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
• Redux:Redux is a JS library for predictable and maintainable global state management. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
• React Router 6:The most popular routing library for React applications and one of the most downloaded React support libraries ever
• SASS:This package is a distribution of Dart Sass, compiled to pure JavaScript with no native code or external dependencies.
• Highcharts:Simplify your data visualization with Highcharts’ React integration. This charting library and expert support make us a favorite in the developer community.
• Chart.js:Chart.js comes with built-in TypeScript typings and is compatible with all popular JavaScript frameworks (opens new window) including React
• React Chartjs 2:A React wrapper for Chart.js, known for its simplicity and lightweight design.
• React Slick:React Slick offers many features, components, and customization capabilities, empowering developers to create image sliders, content sliders
• React Youtube:The react-youtube library is a React component that wraps thinly around the YouTube IFrame Player API, enabling integration of YouTube
• Classnames:A simple javascript utility for conditionally joining classNames together
• React DayPicker:React Simple Maps is a thin wrapper around d3-geo and topojson, providing a declarative API for making map charts.
• React Simple Maps:DayPicker is a React component to create date pickers, calendars, and date inputs for web applications
• React Compound Slider:React Compound Slider is a small slider component with no opinion about markup or styles

Note

For more detailed information and documentation on each of these technologies, feel free to visit the provided links.

CHANGELOG

    Version: 1.0
    *8 April, 2024*
    * Dev   - initial version of the Template with Azure Blue theme

    Version: 1.1
    *17 May, 2024*
    * Dev   - Added Royal Green theme
    * Fix   - Fixed minor bugs on Markets page

    Version: 1.2
    *15 June, 2024*
    * Dev   - Added Royal Golden Yellow theme
    * Fix   - Fixed minor bugs in CSS 

    Version: 1.3
    *27 July, 2024*
    * Dev   - Added 15 new pages to Dashboard Page Designs
    * Fix   - Fixed minor bugs in CSS 

    Version: 1.4
    *5 September, 2024*
    * Dev   - Added 5 new pages to Dashboard Page Designs
    * Fix   - Fixed minor bugs in CSS" 

    Version: 1.5
    *1 October, 2024*
    * Dev   - Added 7 new Swap pages to Dashboard Page Designs
    * Fix   - Fixed minor bugs in CSS 

    Version: 1.6
    *18 October, 2024*
    * Dev   - Added 4 new Swap pages to Dashboard Page Designs
    * Fix   - Fixed minor bugs in CSS