Cambiar a tema oscuro

🎨 Paleta de Colores

Tema Claro

Paleta de colores del tema

Tema Oscuro

Paleta de colores del tema

📊 Componentes de Texto y Métricas

h1-left-alignment
Chart title
Large numbers
use for numbers inside donut charts
123
h2-left-alignment
Chart title
h2-center-alignment
Chart title
h3-left-alignment
Here go numbers XX of total XX
Point 01 (Legend)
Chart title
h3-center-alignment
Here go numbers XX of total XX
Chart title
h4-left-alignment
use for numbers in tooltips
742
additional text
h4-center-alignment
use for numbers in tooltips
26%
Tooltip-text
use for text in tooltips
742
additional text
Bar values
742
x-axis
Jan Feb Mar
x-axis-bold
Jan Feb Mar
y-axis
750

📈 Gráficos de Barras

Chart title goes here

Chart title goes here

📊 Barras de Progreso

Challenge 01

XX of total XX 25%
XX of total XX 65%
XX of total XX 45%

Challenge 01

Here go numbers XX of total XX
35%
🌙

Category

7.2h of 8h

📈 Gráficos de Línea

Chart title goes here

15 April - 21 April
489 additional text

Chart title goes here

15 April - 21 April

Chart title goes here

15 April - 21 April

Chart title goes here

15 April - 21 April

📊 Componentes Chart.js

🎨 Diseño Moderno: Componentes con estilos optimizados y colores consistentes.

📊 Chart.js: Usando Chart.js con configuraciones personalizadas.

🌌 Temas Duales: Soporte completo para temas claro y oscuro.

Uso Básico:

require_once 'ChartComponents.php';
ChartComponents::init();

// Gráfico de barras con Chart.js
$data = [[30000, 50000, 70000], [20000, 40000, 50000]];
echo ChartComponents::barChart($data, ['Serie 1', 'Serie 2']);

// Métrica simple
echo ChartComponents::metricCard('Usuarios', '1,247', 'Total');

🍩 Gráficos de Dona

Chart title goes here

  • Long category label 01
  • Long category label 02
  • Long category label 03

Chart title goes here

76%
  • Point 01
  • Point 02
  • Point 03
76%

Challenge 01

XX of total XX

54%

Challenge 02

XX of total XX

88%

Challenge 03

XX of total XX

🎠 Componentes Carousel

Chart title
Here go numbers XX of total XX
76%
Chart title
Here go numbers XX of total XX
76%
Chart title
Here go numbers XX of total XX
76%

📏 Tarjetas Compactas

354 Category

Challenge 01

XX of total XX

76%

Challenge 02

XX of total XX

50%
742 Category

📈 Gráficos de Línea Avanzados

Chart title goes here

15 April - 21 April

Chart title goes here

15 April - 21 April

489
additional text

Chart title goes here

15 April - 21 April

Chart title goes here

15 April - 21 April

Point 01
Point 02

Chart title goes here

15 April - 21 April

Point 01
Point 02

Chart title goes here

15 April - 21 April

Chart title goes here

15 April - 21 April

Point 01
Point 02
Chart title
2,476
Chart title
1,847
Chart title
3,251

🥧 Gráficos de Pie y Dona Simples

Chart title

15 April - 15 May

58%

Chart title

15 April - 15 May

58%

Chart title

15 April - 15 May

58%

Chart title

Here go numbers XX of total XX

Chart title goes here

Point 01
Point 02
Point 03

📊 Dashboard de Gráficos

Chart title

15 April - 15 May

58%

Chart title

15 April - 15 May

72%

Chart title

15 April - 15 May

45%

Chart title

Here go numbers XX of total XX

Chart title goes here

Point 01
Point 02
Point 03

📊 Gráficos de Barras Avanzados

$476
Daily average
⋯

Chart title goes here

15 April - 21 April

742 additional text

Chart title goes here

15 April - 21 April

$476
Daily average
⋯

Chart title goes here

Last 6 months

⋯
Point 01
Point 02

Chart title goes here

Last 6 months

⋯
Point 01
Point 02

Chart title goes here

⋯
Point 01
Point 02
Point 03