diff --git a/apps/frontend/src/components/ui/charts/Chart.client.vue b/apps/frontend/src/components/ui/charts/Chart.client.vue
index 9f0c636d5a..65276d4cdd 100644
--- a/apps/frontend/src/components/ui/charts/Chart.client.vue
+++ b/apps/frontend/src/components/ui/charts/Chart.client.vue
@@ -169,7 +169,7 @@ const chartOptions = computed(() => {
       toolbar: {
         show: false,
       },
-      stacked: props.stacked,
+      stacked: props.type === "line" ? false : props.stacked,
       stackType: props.percentStacked ? "100%" : "normal",
       zoom: {
         autoScaleYaxis: true,
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 39c93e98b0..44340410ce 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -76,6 +76,10 @@
               </span>
             </h2>
             <div class="chart-controls__buttons">
+              <Button v-tooltip="'Cycle chart type'" icon-only @click="cycleChartType">
+                <ChartAreaIcon v-if="cosmetics.analyticsChartType === 'area'" />
+                <ChartLineIcon v-else />
+              </Button>
               <Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
                 <PaletteIcon />
               </Button>
@@ -102,8 +106,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.downloads && selectedChart === 'downloads'"
                   ref="downloadsChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="Download data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.downloads.chart.data"
                   :labels="analytics.formattedData.value.downloads.chart.labels"
@@ -117,8 +122,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.views && selectedChart === 'views'"
                   ref="viewsChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="View data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.views.chart.data"
                   :labels="analytics.formattedData.value.views.chart.labels"
@@ -132,8 +138,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.revenue && selectedChart === 'revenue'"
                   ref="revenueChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="Revenue data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.revenue.chart.data"
                   :labels="analytics.formattedData.value.revenue.chart.labels"
@@ -306,7 +313,7 @@
 <script setup lang="ts">
 import { Button, Card, DropdownSelect } from "@modrinth/ui";
 import { formatMoney, formatNumber, formatCategoryHeader } from "@modrinth/utils";
-import { UpdatedIcon, DownloadIcon } from "@modrinth/assets";
+import { UpdatedIcon, DownloadIcon, ChartLineIcon, ChartAreaIcon } from "@modrinth/assets";
 import dayjs from "dayjs";
 import { computed } from "vue";
 
@@ -316,8 +323,10 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from "#c
 
 import PaletteIcon from "~/assets/icons/palette.svg?component";
 
+const data = useNuxtApp();
 const router = useNativeRouter();
 const theme = useTheme();
+const cosmetics = useCosmetics();
 
 const props = withDefaults(
   defineProps<{
@@ -411,6 +420,13 @@ const isUsingProjectColors = computed({
   },
 });
 
+function cycleChartType() {
+  cosmetics.value.analyticsChartType = data.$cycleValue(cosmetics.value.analyticsChartType, [
+    "area",
+    "line",
+  ]);
+}
+
 const startDate = ref(dayjs().startOf("day"));
 const endDate = ref(dayjs().endOf("day"));
 const timeResolution = ref(30);
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
index 2c1b6eebe1..86be82b7ce 100644
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -12,6 +12,8 @@ export type DisplayLocation =
   | "user"
   | "collection";
 
+export type ChartType = "area" | "line";
+
 export interface Cosmetics {
   rightSearchLayout: boolean;
   leftContentLayout: boolean;
@@ -22,6 +24,8 @@ export interface Cosmetics {
   preferredDarkTheme: DarkTheme;
   searchDisplayMode: Record<DisplayLocation, DisplayMode>;
   hideStagingBanner: boolean;
+  analyticsChartType: ChartType;
+  analyticsProjectColors: boolean;
 }
 
 export default defineNuxtPlugin({
@@ -51,6 +55,8 @@ export default defineNuxtPlugin({
           user: "list",
           collection: "list",
         },
+        analyticsChartType: "line",
+        analyticsProjectColors: true,
         hideStagingBanner: false,
       }),
     });
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index bc1acaf56f..6ac5ecf6c6 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -68,7 +68,7 @@ export const getDefaultColor = (value) => {
   return defaultColors[value % defaultColors.length];
 };
 
-export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha = "1") => {
+export const intToRgba = (color, projectId = "Unknown", theme = "dark") => {
   const hash = hashProjectId(projectId);
 
   if (!color || color === 0) {
@@ -110,7 +110,7 @@ export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha =
   g = Math.min(255, Math.max(0, g));
   b = Math.min(255, Math.max(0, b));
 
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  return `rgb(${r}, ${g}, ${b})`;
 };
 
 const emptyAnalytics = {
diff --git a/packages/assets/icons/chart-area.svg b/packages/assets/icons/chart-area.svg
new file mode 100644
index 0000000000..696c308de3
--- /dev/null
+++ b/packages/assets/icons/chart-area.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-area-icon lucide-chart-area"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/chart-line.svg b/packages/assets/icons/chart-line.svg
new file mode 100644
index 0000000000..462512ab3f
--- /dev/null
+++ b/packages/assets/icons/chart-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line-icon lucide-chart-line"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/></svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index f4409ed7fe..431883f719 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -58,6 +58,8 @@ import _BracesIcon from './icons/braces.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
+import _ChartAreaIcon from './icons/chart-area.svg?component'
+import _ChartLineIcon from './icons/chart-line.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
@@ -276,6 +278,8 @@ export const BoxImportIcon = _BoxImportIcon
 export const BracesIcon = _BracesIcon
 export const CalendarIcon = _CalendarIcon
 export const ChartIcon = _ChartIcon
+export const ChartAreaIcon = _ChartAreaIcon
+export const ChartLineIcon = _ChartLineIcon
 export const CheckIcon = _CheckIcon
 export const CheckCheckIcon = _CheckCheckIcon
 export const CheckCircleIcon = _CheckCircleIcon