HTMLコード
<div class="p-6 bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-xl dark:from-gray-700 dark:to-gray-800">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Activity Chart</h2>
<div class="relative h-48">
<canvas id="myChart" class="w-full h-full"></canvas>
</div>
<div class="flex justify-around mt-4 text-gray-600 dark:text-gray-300 text-sm">
<span>Likes</span>
<span>Comments</span>
<span>Shares</span>
<span>Views</span>
</div>
</div>関連コンポーネント
Sports_Fitness_Charts_Component
スポーツおよびフィットネスアプリケーション向けの複雑で応答性の高いチャートコンポーネントで、黒と白のベースと単一のアクセントカラーを備えたすっきりとしたミニマルなスイスタイポグラフィデザインが特徴です。ダークモードのサポートと、さまざまなデータ視覚化のためのグリッドベースのレイアウトが含まれています。
Industrial_Chart_Component_Ocean_Blue_Simple
海/青の色調を使用した工業的な原材料の美学を備えたシンプルで応答性の高いチャートコンポーネントで、非営利団体/慈善団体向けに設計されています。ダークモードのサポートが含まれています。
Glassmorphism 販売チャート
Glassmorphism スタイル、鮮やかな配色、ダーク モードのサポートを備えたシンプルで応答性の高いグラフ コンポーネントで、e コマース ダッシュボードに適しています。