Here is my code so far. I want you to extend it with more graphs that call back to the same profit data or create new data for them.

(ns apexchartsdemo.core
  (:require
   [reagent.core :as r]
   [reagent.dom :as rdom]
   [goog.events :as events]
   [goog.history.EventType :as HistoryEventType]
   [markdown.core :refer [md->html]]
   [apexchartsdemo.ajax :as ajax]
   [ajax.core :refer [GET POST]]
   [reitit.core :as reitit]
   [clojure.string :as string]
   ["react-apexcharts$default" :as Chart])
  (:import goog.History))

(def chart (r/adapt-react-class Chart))

(defonce session (r/atom {:page :home}))

(defn nav-link [uri title page]
  [:a.navbar-item
   {:href   uri
    :class (when (= page (:page @session)) "is-active")}
   title])

(defn navbar [] 
  (r/with-let [expanded? (r/atom false)]
    [:nav.navbar.is-info>div.container
     [:div.navbar-brand
      [:a.navbar-item {:href "/" :style {:font-weight :bold}} "Apex Charts demo"]
      [:span.navbar-burger.burger
       {:data-target :nav-menu
        :on-click #(swap! expanded? not)
        :class (when @expanded? :is-active)}
       [:span][:span][:span]]]
     [:div#nav-menu.navbar-menu
      {:class (when @expanded? :is-active)}
      [:div.navbar-start
       [nav-link "#/" "Home" :home]
       [nav-link "#/about" "About" :about]]]]))

(defn about-page []
  [:section.section>div.container>div.content
   [:img {:src "/img/warning_clojure.png"}]])

(defn random-team-profit []
  (map #(+ 10000 %)
       (repeatedly 5 (fn [] (rand-int 70000)))))


(def profit-series (r/atom {2018  (random-team-profit) 
                            2019  (random-team-profit) 
                            2020  (random-team-profit) 
                            2021  (random-team-profit) 
                            2022  (random-team-profit)
                            2023  (random-team-profit)}))

(defn totals-per-year [profit-series-atom] 
       (map #(reduce + %) (vals profit-series-atom)))
(defn profit-of-year [profit-series-atom year]
  (reduce + (profit-series-atom year)))
(defn team-contribution [profit-series-atom year]
  (profit-series-atom year))

;; atoms and etc
(def my-reagent-atom (r/atom 123))
(def year-val      (r/atom 2023))

(defn slider-on-change-handler [js-event]
  (reset! year-val (-> js-event .-target .-value)))



;; Pie Chart data atoms
(def pie-chart-options (r/atom {:chart {:width 380 :type "pie"}
                                :labels ["Team A", "Team B", "Team C", "Team D", "Team E"]
                                :responsive [{:breakpoint 480
                                              :options {:chart {:width 200}
                                                        :legend {:position "bottom"}}}]}))
;; Area Chart data atoms
(def area-chart-series (r/atom [{:name "Series 1"
                                 :data [31, 40, 28, 51, 42, 109, 100]}]))
(def area-chart-options (r/atom {:chart {:height 350 :type "area"}
                                 :dataLabels {:enabled false}
                                 :stroke {:curve "smooth"}
                                 :xaxis {:type "datetime"
                                         :categories ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00",
                                                      "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00",
                                                      "2018-09-19T06:30:00"]}}))




;; (def year-slider-low-val   (r/atom 2010))
;; (def year-slider-high-val  (r/atom 2015))   

;; (defn year-slider-on-change-handler-low [js-event]
;;   (let [new-val (js/parseInt (-> js-event .-target .-value))]
;;     (when (< new-val @year-slider-high-val)
;;       (reset! year-slider-low-val new-val))))

;; (defn year-slider-on-change-handler-high [js-event]
;;   (let [new-val (js/parseInt (-> js-event .-target .-value))]
;;     (when (> new-val @year-slider-low-val)
;;       (reset! year-slider-high-val new-val))))

;; (defn year-slider []
;;   [:div.slidecontainer
;;    [:input {:type  "range"
;;             :min   "1990"
;;             :max   "2024"
;;             :value @year-slider-low-val
;;             :class "year-slider"
;;             :on-change year-slider-on-change-handler-low}]
;;    [:input {:type  "range"
;;             :min   "1990"
;;             :max   "2024"
;;             :value @year-slider-high-val
;;             :class "year-slider"
;;             :on-change year-slider-on-change-handler-high}]
;;    [:p (str "From: " @year-slider-low-val " To: " @year-slider-high-val)]])


;; (defn mount-slider []
;;   (rdom/render [year-slider]
;;             (.getElementById js/document "app")))


;; Additional chart components (for Pie and Area charts)

(defn pie-chart []
  [chart {:options @pie-chart-options
          :series (team-contribution @profit-series (int @year-val))
          :type "pie"
          :width 380}])

(defn area-chart []
  [chart {:options @area-chart-options
          :series @area-chart-series
          :type "area"
          :height 350}])

(def bar-chart-series-1 (r/atom (vec (repeatedly 8 #(rand-int 100)))))
(def line-chart-series-1 (r/atom [10 41 35 51 49 62 69 91 148]))




(defn my-div []
  [:div
   [:p "foo" @my-reagent-atom]
   [:p "bar" @year-val]])





(def quarters ["Q1" "Q2" "Q3" "Q4"])

(defn current-year []
  (let [current-date (js/Date.)]
    (.getFullYear current-date)))

(defn generate-years 
  "Generates a number of years. 
   Can take a specific number of years or a specific start and end. 
   Returns a vector."
  ([]
   (generate-years 10))
  ([num-years]
   (vec (reverse (take num-years (iterate dec (- (current-year) 1))))))
  ([start-year end-year]
   (vec (range start-year (inc end-year)))))

(def years (generate-years 3))

(defn generate-quarters [years]
  (vec (for [year years
             quarter quarters]
         (str quarter " " year))))

(def year-quarters (r/atom (generate-quarters years)))




(defn home-page []
  [:section.section>div.container>div.content 
   [:h1 {:style {:display "flex"
                 :justify-content "center"
                 :align-items "center"}} 
    "ApexCharts.js"] ;; you MUST remember to dereference
   [:h4 "ApexCharts Basics"]
   [:p  {:style {:display "flex"
                 :justify-content "center"
                 :align-items "center"}}
    "ApexCharts is a modern charting library that works with the React framework. It provides 
         a wide range of chart types and features such as animations, zooming, panning, and updating series dynamically. 
         It is also responsive, making it suitable for creating interactive data visualizations for both desktop and mobile devices."]

   [:button {:on-click #(reset! my-reagent-atom (rand-int 9999))}
    "Read more"]
   [:button {:on-click #(swap! bar-chart-series-1 assoc 4 (rand-int 100))}
    "Click me too"]

   
   [:div {:class "slidecontainer"}
    [:input {:type  "range"
             :id    "MyRange1"
             :min   2018
             :max   2023
             :value @year-val
             :on-change slider-on-change-handler}]]
   [:p "Data for year: " @year-val]

[:h4 "Profit Breakdown by Team - Pie Chart"]
[pie-chart] ;; Pie chart component
   ;; Area Chart - Shows trend analysis over time
[:h4 "Trend Analysis - Area Chart"]
[area-chart] ;; Area chart component


   [chart {:options {:chart {:id "basic-bar"}
                     :xaxis {:categories  (keys @profit-series)}
                     :title {:text "Profit"
                             :align "left"}}
           
           :series  [{:name "series-1"
                      :data (totals-per-year @profit-series)}]
           :type    "bar"
           :width   500}]

   [:button {:on-click #(reset! line-chart-series-1 (repeatedly 9 (fn [] (rand-int 200))))}
    "Click me too"]
   [chart
    {:options {:chart {:zoom {:enabled false}}
               :dataLabels {:enabled false}
               :stroke {:curve "straight"}
               :title {:text "Product Trends by Month" 
                       :align "left"}
               :grid {:row {:colors ["#f3f3f3" "transparent"]
                            :opacity 0.5}}
               :xaxis {:categories ["Jan" "Feb" "Mar" "Apr" "May" "Jun" "Jul" "Aug" "Sep"]}}
     :series [{:name "Desktops"
               :data @line-chart-series-1}]
     :height 350
     :type "line"}]])






(def pages
  {:home #'home-page
   :about #'about-page})

(defn page []
  [(pages (:page @session))])

;; -------------------------
;; Routes

(def router
  (reitit/router
    [["/" :home]
     ["/about" :about]]))

(defn match-route [uri]
  (->> (or (not-empty (string/replace uri #"^.*#" "")) "/")
       (reitit/match-by-path router)
       :data
       :name))
;; -------------------------
;; History
;; must be called after routes have been defined
(defn hook-browser-navigation! []
  (doto (History.)
    (events/listen
      HistoryEventType/NAVIGATE
      (fn [^js/Event.token event]
        (swap! session assoc :page (match-route (.-token event)))))
    (.setEnabled true)))

;; -------------------------
;; Initialize app
(defn fetch-docs! []
  (GET "/docs" {:handler #(swap! session assoc :docs %)}))

(defn ^:dev/after-load mount-components []
  (rdom/render [#'navbar] (.getElementById js/document "navbar"))
  (rdom/render [#'page] (.getElementById js/document "app")))

(defn init! []
  (ajax/load-interceptors!)
  (fetch-docs!)
  (hook-browser-navigation!)
  (mount-components))