Estudio de Highcharts

• Amplia variedad de gráficos
• Compatibilidad total
• Interactividad y animaciones

• Gráficos interactivos
• Visualizaciones de datos interactivas
• Dashboards y reportes

Instalación: npm i highcharts

import Highcharts from 'highcharts';
Highcharts.chart('g', { series: [{ data: [1, 3, 2] }] });

1. Chart de línea

Serie temporal simple.

import Highcharts from 'highcharts';

Highcharts.chart('g', {
  title: { text: 'Ventas' },
  series: [{ name: 'Mensual', data: [5, 9, 7, 12] }],
  xAxis: { categories: ['Ene', 'Feb', 'Mar', 'Abr'] },
});

2. Pie con drilldown

Gráfico de tarta con desglose.

import Highcharts from 'highcharts';

Highcharts.chart('g', {
  chart: { type: 'pie' },
  series: [{ name: 'Ventas', data: [{ name: 'A', y: 60, drilldown: 'a' }, { name: 'B', y: 40, drilldown: 'b' }] }],
  drilldown: { series: [{ id: 'a', data: [['x', 20], ['y', 40]] }] },
});