A
Anonymous

Chart Container - Copy this React, Mui Component to your project

{ "financial_quarter": { "Q1 2024 2025": {"Total.deals": 3867.0, "Total Value": 76543.25}, "Q2 2024 2025": {"Total deals": 3501.0, "Total Value": 90177.93}, "Q3 2024 2025": {"Total deals": 3244.0, "Total Value": 73336.12}, "Q4 2024 2025": {"Total deals": 4957.0, "Total Value": 122818.3), "Q1 2025 2026": {"Total deals": 5283.0, "Total Value": 179639.3}, "Q2 2025 2026": {"Total deals": 4121.0, "Total Value": 124263.7}, "Q3 2025 2026": {"Total deals": 4330.0, "Total Value": 139789.35), "Q4 2025 2026": {"Total deals": 2358.0, "Total Value": 106623.97), "Q1 2026 2027": {"Total deals": 2497.0, "Total Value": 108178.03), " Q2 2026 2027": {"Total deals": 1788.0, "Total Value": 69583.28), "Q3 2026 2027": {"Total deals": 1986.0, "Total Value": 68873.26), "Q4 2026 2027": {"Total deals": 1132.0, "Total Value": 51164.26), }, "industry": { "BFS": {"Total deals": 4232.0, "Total Value": 106275.03), "CMI": {"Total deals": 2652.0, "Total Value": 107179.73), "Education": {"Total deals": 1327.0, "Total Value": 5973.68), "Energy & Resources": {"Total deals": 844.0, "Total Value": 13522.77}, "Healthcare": {"Total deals": 1353.0, "Total Value": 39168.5), "HiTech": {"Total deals": 2169.0, "Total Value": 42003.69), "Insurance": {"Total deals": 1278.0, "Total Value": 36716.49), "Life Sciences": {"Total deals": 571.0, "Total Value": 12319.59}, "Manufacturing": {"Total deals": 2802.0, "Total Value": 65852.14), "Others": {"Total deals": 3506.0, "Total Value": 38088.23), "Public Services": {"Total deals": 11832.0, "Total Value": 654524.26), "Retail & CPG": {"Total deals": 3403.0, "Total Value": 38882.47), "TTH": {"Total deals": 2170.0, "Total Value": 30249.25}, "TechBU": {"Total deals": 58.0, "Total Value": 2322.74}, "Utilities": {"Total deals": 867.0, "Total Value": 17912.18), }, "region": { "Americas": {"Total deals": 12520.0, "Total Value": 559535.91}, "Asia Pacific": {"Total deals": 4796.0, "Total Value": 67150.57}, "EMEA": {"Total deals": 14189.0, "Total Value": 375309.92}, "Global": { "Total deals": 7559.0, "Total Value": 208994.35}, } } based above data implement the charts. for financial_quarter i want line and column graph, for industry bar graphs and for region bar graph. while displaying graphs in the right most corner i want filter dropdown, values are financial, industry and region. according the filter value i want to display the graphs. implement reusable code.

Prompt
Component Preview

About

ChartContainer - Visualize financial quarters, industries, and regions with line, column, and bar graphs. Built with React and MUI. Download free code!

Share

Last updated 1 month ago