<script lang="ts" setup>
// Netflix most viewed genres/categories for 2024
const bubbleChartData = [
// Drama
{
id: 'Drama-Jan',
title: 'Drama',
month: 1,
viewingHours: 2.8,
subscribers: 45,
},
{
id: 'Drama-Feb',
title: 'Drama',
month: 2,
viewingHours: 2.9,
subscribers: 48,
},
// ... more data
]
const categories = {
Drama: { name: 'Drama', color: 'var(--color-red-400)' },
'Action/Thriller': {
name: 'Action/Thriller',
color: 'var(--color-orange-400)',
},
Comedy: { name: 'Comedy', color: 'var(--color-yellow-400)' },
Documentary: { name: 'Documentary', color: 'var(--color-blue-400)' },
Romance: { name: 'Romance', color: 'var(--color-pink-400)' },
'Sci-Fi/Fantasy': {
name: 'Sci-Fi/Fantasy',
color: 'var(--color-green-400)',
},
Horror: { name: 'Horror', color: 'var(--color-purple-400)' },
}
const monthNames = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
]
function formatNumber(tick: number | Date): string {
return typeof tick === 'number' ? tick.toFixed(1) : String(tick)
}
const xAccessor = (d: any) => d.month
const yAccessor = (d: any) => d.viewingHours
const sizeAccessor = (d: any) => d.subscribers
</script>
<template>
<BubbleChart
:data="bubbleChartData"
:height="500"
:categories="categories"
category-key="title"
:x-accessor="xAccessor"
:y-accessor="yAccessor"
:y-domain-line="false"
:size-accessor="sizeAccessor"
:legend-position="LegendPosition.Bottom"
:x-formatter="
(tick: number) => monthNames[tick - 1] ?? String(tick)
"
:y-formatter="(v: number | Date) => `${formatNumber(v)}B hrs`"
/>
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
data | BubbleChartData[] | [] | Array of data points for the chart. |
categories | Record<string, BubbleCategory> | {} | Series configuration: name and color for each data key. |
height | number | 300 | Height of the chart in pixels. |
category-key | string | '' | Key to access the category from the data item. |
x-accessor | (d: any) => any | - | Accessor function for x-axis values. |
y-accessor | (d: any) => any | - | Accessor function for y-axis values. |
size-accessor | (d: any) => any | - | Accessor function for bubble size. |
x-formatter | (tick: number) => string | - | Formats X-axis labels. |
y-formatter | `(v: number | Date) => string` | - |
legend-position | LegendPosition | 'none' | Position of the legend. |
y-domain-line | boolean | true | Show the Y-axis domain line. |
The data should be an array of objects where each object represents a bubble.
interface BubbleChartData {
id: string
title: string
month: number
viewingHours: number
subscribers: number
[key: string]: any
}
Categories define the visual appearance and metadata for each bubble series.
interface BubbleCategory {
name: string
color: string
}
interface BubbleCategories {
[key: string]: BubbleCategory
}