Hi, this is my code. Please add more charts that will extend this code.

(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 teams ["Team A", "Team B", "Team C", "Team D", "Team E"])


;; Year/time generation stuff
(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)))


;; Data storage, generation, etc
(defn generate-year-map [num-years]
  (into {} (map #(hash-map % (random-team-profit)) (generate-years num-years))))

(def profit-series (r/atom (generate-year-map 6)))

(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))

(def line-chart-series-1 (r/atom [10 41 35 51 49 62 69 91 148]))

;; 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)))



;; Charts

(defn pie-chart []
  [chart {:options {:chart {:width 380 :type "pie"}
                    :labels teams
                    :responsive [{:breakpoint 480
                                  :options {:chart {:width 200}
                                            :legend {:position "bottom"}}}]}
          :series (team-contribution @profit-series (int @year-val))
          :type "pie"
          :width 380}])

(defn line-chart []
  [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 area-chart-series (r/atom [{:name "Series 1"
                                 :data [31, 40, 28, 51, 42, 109, 100]}]))

(defn area-chart []
  [chart {:options {: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"]}}
          :series @area-chart-series
          :type "area"
          :height 350}])

(defn bar-chart [] 
  [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"
          :height 350}
   ])





(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 #(reset! profit-series (generate-year-map (+ (rand-int 8) 3)))}
    "Generate new data"]

   
   [:div {:class "slidecontainer"}
    [:input {:type  "range"
             :id    "MyRange1"
             :min   (first (sort (keys @profit-series)))
             :max   (last  (sort (keys @profit-series)))
             :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

[line-chart]
   ;; Area Chart - Shows trend analysis over time
[:h4 "Trend Analysis - Area Chart"]
[area-chart] ;; Area chart component

[bar-chart]
   
   ])






(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))