📊 Migrating All Old Chart Implementations to ECharts
🧩 Background
Over time, our application had incorporated charts from various third-party libraries such as:
react-google-charts@amcharts/amcharts4recharts
While functional, these libraries presented several critical limitations:
🚫 Performance Issues: Pages with complex charts took a significant amount of time to load.
📦 Large Bundle Size: Multiple charting libraries inflated our JavaScript bundle size, impacting overall application performance and load time.
❌ Inconsistent UI/UX: Chart designs and interaction behaviors were not standardized across the platform.
✅ Why ECharts?
To address the above limitations, we have migrated all chart implementations to a unified, robust, and efficient charting library: Apache ECharts (ECharts).
Benefits of using ECharts:
🚀 Lightweight and performant
🎨 Highly customizable visual styles
🔁 Consistent data interaction patterns
🔌 Flexible configuration via JSON options
🧩 Seamless integration with our ReactJS component using
allInOneEchart
🔄 Chart Migration Summary
The following table lists the migrated charts, including their old implementation types and the corresponding new ECharts-based versions:
Title of the Chart in which they are utilized | Old Type | New Type | New ChartType | New Chart Variant |
|---|---|---|---|---|
Subdomain Count | dual-axis | allInOneEchart | bar | verticalBarLineDualAxis |
Total Spend | combo-amchart | allInOneEchart | bar | verticalBarChartWithBenchmark |
Cloud Spend | stackedBarChart | allInOneEchart | bar | sideBySideVerticalGroupBar |
Chargeback Over Time | stackedBarChart | allInOneEchart | bar | vertical |
Tagging Policy (# of Resources) | stackedBarChart | allInOneEchart | bar | singleHorizontalBarWithStack |
Enterprise Commit Trend | stackedBarChart | allInOneEchart | bar | Enterprise Commit Trend |
Total Bill vs. Chargeback vs. No Chargeback | stackedBarChart | allInOneEchart | bar | verticalBarChartWithBenchmark |
Cloud Spend | stackedBarChart | allInOneEchart | bar | sideBySideVerticalGroupBar |
Cost Over Time | line | line | NA | There has been no change. Internally managed |
EKS Cluster Details | hawkTabLineChart | hawkTabLineChart | NA | There has been no change. Internally managed |
CPU, Memory Utilization by Weekday | bar | bar | NA | There has been no change. Internally managed |
Top 10 Cloud Services By Cost | piGraph | piGraph | NA | There has been no change. Internally managed |
Cost Flow | sankey | sankey | NA | There has been no change. Internally managed |
🗂 Reference to Old Chart Usage
To support the migration effort, we have also compiled a detailed reference of where the old charts were used throughout the application. This information is documented in the attached file: Old_Chart_Components_By_Page.xlsx.
This file includes:
📦 Chart Components such as
<BarGraph />,<PieChart />,<SummaryGraph />, etc.🔍 Chart Types and Libraries used, including
recharts,@amcharts/amcharts4, andreact-google-charts.
This reference ensures full coverage and avoids any legacy component being missed during the switch to ECharts.