Guía

Configuración

Un gráfico es un único objeto de opciones plano pasado a KatuCharts.chart(container, options). Cada propiedad es opcional — los valores por defecto son sensatos. Esta es la referencia completa para cada clave de nivel superior.

const chart = KatuCharts.chart(container, {
  chart:    { /* chart-level options */ },
  title:    { /* title options */ },
  subtitle: { /* subtitle options */ },
  xAxis:    { /* x-axis options */ },
  yAxis:    { /* y-axis options */ },
  series:   [ /* array of series */ ],
  tooltip:  { /* tooltip options */ },
  legend:   { /* legend options */ },
  plotOptions: { /* default series options */ },
  credits:  { /* credits options */ },
  exporting: { /* export options */ },
  colorAxis: { /* color mapping */ },
  responsive: { /* responsive rules */ },
  accessibility: { /* a11y options */ },
  drilldown: { /* drilldown options */ }
});

chart

Contenedor general, fondo, dimensiones y modos de interacción.

Propiedad	Tipo	Valor por defecto	Descripción
`type`	string	'line'	Tipo de serie por defecto para series que no establecen el suyo.
`width`	number \| null	null	Ancho explícito en px. null rellena el contenedor.
`height`	number \| string	400	Altura en px o un porcentaje como '56%' del ancho. Usa null para ajustar la altura al contenido automáticamente (limitada en viewports móviles cortos).
`backgroundColor`	string	'#ffffff'	Color de fondo para toda el área del gráfico.
`borderColor / borderWidth / borderRadius`	string / number / number	— / 0 / 0	Estilos de borde del contenedor.
`spacing`	number[]	[10,10,15,10]	Espaciado alrededor del gráfico [superior,derecho,inferior,izquierdo].
`margin`	number[] \| null	null	Márgenes explícitos del área de gráfico; sobrescribe el diseño automático.
`animation`	boolean \| object	true	Activa/desactiva todas las animaciones, o pasa { duration, easing }.
`zoomType`	string	—	Eje de arrastre para zoom: 'x', 'y' o 'xy'.
`panning`	boolean \| object	false	Desplazamiento cuando se amplía. Objeto: { type }.
`panKey`	string	—	Tecla presionada para desplazarse: 'shift', 'ctrl', 'alt'.
`inverted`	boolean	false	Intercambia ejes X e Y (gráfico horizontal).
`polar`	boolean	false	Renderiza todas las series en coordenadas polares (radar).
`reflow`	boolean	true	Redimensiona automáticamente cuando el contenedor se redimensiona.
`palette`	string[]	—	Paleta personalizada que sobrescribe los colores del tema.
`style`	object	—	CSS aplicado al elemento del contenedor.
`events`	object	—	Listeners: load, redraw, render, selection, click, drilldown, drillup.
`plotBackgroundColor / plotBorderColor / plotBorderWidth`	string / string / number	—	Estilos del área de gráfico (dentro de los ejes).
`scrollablePlotArea`	object	—	Hace que el área de trazado se desplace dentro de un viewport fijo: { minWidth, minHeight, scrollPositionX, scrollPositionY }. Mantiene usables listas de categorías largas y series temporales anchas en pantallas pequeñas.

chart.zooming

Propiedad	Tipo	Valor por defecto	Descripción
`type`	string	—	Dirección del zoom: 'x', 'y', 'xy'.
`key`	string	—	Tecla modificadora: 'shift', 'ctrl', 'alt'.
`mouseWheel`	boolean \| object	—	Zoom con la rueda del ratón — desactivado por defecto; actívalo con true o { enabled, sensitivity, type }. En gráficos desplazables, la rueda desplaza el área de trazado en lugar de hacer zoom.
`pinchType`	string	—	Dirección del pellizco táctil: 'x', 'y', 'xy'.
`resetButton`	object	—	Botón de restablecer que aparece tras hacer zoom; restaura el rango original de los ejes. Personalízalo con { theme, position }.

title / subtitle

La misma forma; el subtítulo se renderiza justo debajo del título.

Propiedad	Tipo	Valor por defecto	Descripción
`text`	string	'Chart title'	Contenido; null/' lo oculta.
`align`	string	'center'	'left' \| 'center' \| 'right'.
`margin`	number	15	Espacio debajo del título.
`style`	object	—	Estilos de texto CSS.
`x / y`	number	0 / —	Desplazamientos en píxeles desde la posición de alineación.
`floating`	boolean	false	Flota sobre el área del gráfico.
`useHTML`	boolean	false	Permite HTML en lugar de texto SVG.

xAxis / yAxis

Un único objeto o un array para múltiples ejes. xAxis e yAxis comparten estas propiedades (los valores por defecto difieren donde se indica).

Propiedad	Tipo	Valor por defecto	Descripción
`type`	string	'linear'	'linear' \| 'logarithmic' \| 'datetime' \| 'category'.
`title.text`	string	null	Título del eje; null lo oculta.
`min / max`	number	—	Límites duros del eje.
`softMin / softMax`	number	—	Límites suaves — extiende aquí si los datos no lo hacen.
`floor / ceiling`	number	—	Límites absolutos que el padding no puede cruzar.
`categories`	string[]	—	Etiquetas de categoría; establece el tipo a 'category'.
`tickInterval / tickAmount`	number	—	Espaciado de tick (ms en datetime) / conteo exacto de tick.
`tickLength / tickWidth / tickColor`	number / number / string	10 / 1 / '#ccd6eb'	Estilos de marca de tick.
`gridLineWidth`	number	0 (x) / 1 (y)	Ancho de línea de cuadrícula por tick.
`gridLineColor / gridLineDashStyle`	string / string	'#e6e6e6' / 'Solid'	Color y guión de línea de cuadrícula.
`lineWidth / lineColor`	number / string	1 / '#ccd6eb'	Estilos de línea de eje.
`offset`	number	0	Desplazamiento desde el borde del área de gráfico.
`opposite`	boolean	false	Coloca en el lado opuesto.
`reversed / visible`	boolean	false / true	Invierte la dirección / oculta el eje.
`crosshair`	boolean \| object	false	Retícula del puntero; objeto: { color, width, dashStyle }.
`plotBands / plotLines`	object[]	—	Bandas de color / líneas de referencia (abajo).
`startOnTick / endOnTick`	boolean	true	Ajusta los extremos del eje a los ticks.
`minPadding / maxPadding`	number	0.01	Padding como una fracción del rango.
`allowDecimals`	boolean	true	Permite valores de tick decimales.
`id / linkedTo`	string / number\|string	—	Id del eje / vincula extremos a otro eje.
`scrollbar`	boolean \| object	false	Barra de desplazamiento por eje para navegar cuando el área de trazado se desplaza — { enabled, barBackgroundColor, trackBorderColor, … }.

Etiquetas de eje

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	true	Muestra/oculta las etiquetas de tick.
`format`	string	'{value}'	Plantilla, por ejemplo '${value}'.
`formatter`	function	—	Callback; recibe this.value.
`style`	object	—	Estilos CSS.
`rotation`	number	0	Rotación fija en grados.
`autoRotation / autoRotationLimit`	number[] / number	[-45] / 80	Rota automáticamente los ángulos cuando las etiquetas se superponen.
`step`	number	—	Muestra cada enésima etiqueta.
`padding`	number	5	Padding desde la línea del eje.

plotBands & plotLines

yAxis: {
  plotBands: [
    { from: 0, to: 50, color: 'rgba(68,170,213,0.1)', label: { text: 'Low' } },
    { from: 100, to: 200, color: 'rgba(255,68,68,0.1)', label: { text: 'High' } }
  ],
  plotLines: [
    { value: 75, color: '#d62728', width: 2, dashStyle: 'Dash',
      label: { text: 'Target', align: 'right' }, zIndex: 5 }
  ]
}

series

El array en el corazón de la config — una entrada por conjunto de datos. Opciones comunes primero; opciones específicas del tipo siguen.

Propiedad	Tipo	Valor por defecto	Descripción
`type`	string	'line'	Tipo de serie; sobrescribe chart.type.
`name`	string	—	Etiqueta de leyenda / tooltip.
`data`	array	[]	Puntos: números, [x,y], o { x, y, name }.
`id`	string	—	Id para chart.get() y perforación.
`color / colorIndex`	string / number	—	Sobrescribe color de paleta / índice de paleta.
`visible / showInLegend`	boolean	true	Visibilidad inicial / presencia en leyenda.
`lineWidth / lineColor`	number / string	2 / —	Estilos de línea.
`dashStyle`	string	'Solid'	Solid, Dash, Dot, ShortDash, LongDash, DashDot…
`fillColor / fillOpacity`	string / number	— / 0.75	Color de relleno de área y opacidad.
`opacity`	number	1	Opacidad general de la serie.
`marker / dataLabels`	object	—	Marcadores / etiquetas de puntos (abajo).
`stacking / stack`	string / string\|number	—	'normal' \| 'percent' / id de grupo de pila.
`step`	string \| boolean	false	Línea de paso: 'left' \| 'center' \| 'right'.
`connectNulls`	boolean	false	Dibuja a través de puntos nulos.
`threshold / negativeColor`	number / string	0 / —	Línea base de área / color debajo del umbral.
`enableMouseTracking / allowPointSelect`	boolean	true / false	Desplazamiento y clic / clic para seleccionar puntos.
`clip`	boolean	true	Recorta el dibujo al área del gráfico.
`zones / zoneAxis`	object[] / string	— / 'y'	Zonas de estilos basadas en valor (abajo).
`animation / cursor`	boolean\|object / string	true / —	Animación de entrada / cursor de desplazamiento.
`xAxis / yAxis / zIndex`	number\|string	0 / 0 / —	Ejes vinculados / orden de apilamiento.
`pointStart / pointInterval`	number	0 / 1	Inicio y paso X para arrays de números planos.
`keys`	string[]	—	Mapea columnas de array a props, por ejemplo ['x','y','z'].
`drilldown`	string	—	Id de la serie de perforación para clics.

Columnas / Barras

Propiedad	Tipo	Valor por defecto	Descripción
`pointPadding / groupPadding`	number	0.1 / 0.2	Padding dentro de un grupo / entre grupos.
`borderWidth / borderColor / borderRadius`	number / string / number	1 / '#fff' / 0	Estilos de borde de columna.
`colorByPoint`	boolean	false	Colorea cada columna desde la paleta.
`minPointLength`	number	0	Altura mínima de barra para valores pequeños.
`maxPointWidth / pointWidth`	number	—	Ancho máximo / fijo de columna en px.

Circular / Anillo

Propiedad	Tipo	Valor por defecto	Descripción
`innerSize`	number \| string	0	Diámetro interior para arillos, por ejemplo '50%'.
`size / center`	number\|string / array	— / ['50%','50%']	Diámetro exterior / centro [x,y].
`startAngle / endAngle`	number	0 / 360	Barrido circular (usa <360 para un circular parcial).
`slicedOffset`	number	10	Desplazamiento en píxeles para puntos cortados.

Marcador

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean \| null	null	null muestra automáticamente cuando hay pocos puntos.
`symbol`	string	'circle'	circle, square, diamond, triangle, triangle-down, o URL.
`radius`	number	4	Radio del marcador.
`fillColor / lineColor / lineWidth`	string / string / number	— / — / 0	Relleno del marcador y borde.
`states.hover / states.select`	object	—	{ enabled, radius, fillColor, lineColor, lineWidth }.

Etiquetas de datos

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	false	Habilita etiquetas en cada punto.
`format / formatter`	string / function	'{point.y}' / —	Plantilla / callback (this.point, this.series).
`style / color`	object / string	—	Estilos de texto.
`backgroundColor / borderColor / borderRadius / padding`	string / string / number / number	— / — / 0 / 5	Estilos de caja de etiqueta.
`align / verticalAlign`	string	'center' / —	Alineación dentro del punto.
`x / y / rotation`	number	0	Desplazamientos y rotación.
`inside / allowOverlap`	boolean	false	Coloca dentro de barras / permite superposición.
`distance / connectorWidth / connectorColor`	number / number / string	— / 1 / —	Distancia de etiqueta circular y conector.

Estados de serie

plotOptions: {
  series: {
    states: {
      hover:    { lineWidthPlus: 2, halo: { size: 10, opacity: 0.25 } },
      select:   { color: '#d62728', borderColor: '#000', borderWidth: 2 },
      inactive: { opacity: 0.2, animation: { duration: 50 } }
    }
  }
}

Zonas

series: [{
  data: [29, 71, 106, 82, 44, 13],
  zoneAxis: 'y',
  zones: [
    { value: 50,  color: '#2ca02c' },   // below 50
    { value: 100, color: '#ff7f0e' },   // 50–100
    { color: '#d62728' }                // above 100
  ]
}]

Opciones comunes, renderizadas

Estas opciones se aplican a cualquier tipo de serie. Cada ejemplo es la configuración mínima necesaria para ver la opción en acción.

color · colorByPoint

Colorea cada punto desde la paleta con colorByPoint, o asigna un color explícito a un punto.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    colorByPoint: true,
    data: [
      { name: 'Apples', y: 5 },
      { name: 'Pears', y: 3, color: '#8C2810' },
      { name: 'Plums', y: 7 }
    ]
  }]
});

visible · showInLegend

Oculta una serie al cargar con visible: false, o déjala fuera de la leyenda con showInLegend: false.

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Revenue',  data: [4, 6, 5, 8] },
    { name: 'Forecast', data: [3, 5, 6, 7], visible: false },
    { name: 'Internal', data: [2, 2, 3, 3], showInLegend: false }
  ]
});

marker

Activa los marcadores de punto y elige símbolo y radio.

KatuCharts.chart('container', {
  chart: { type: 'spline' },
  series: [{
    data: [3, 5, 4, 7, 6],
    marker: { enabled: true, symbol: 'diamond', radius: 6 }
  }]
});

dataLabels

Muestra el valor en cada punto; format admite tokens como {point.y}.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [29, 71, 40, 55],
    dataLabels: { enabled: true, format: '{point.y}%' }
  }]
});

dashStyle · lineWidth · lineColor

Distingue líneas por grosor, patrón de guion y color.

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Thick',  data: [4, 5, 6, 7], lineWidth: 4 },
    { name: 'Dashed', data: [3, 4, 4, 5], dashStyle: 'Dash', lineColor: '#A85429' }
  ]
});

opacity · fillOpacity

Controla la transparencia de la serie y del relleno de área.

KatuCharts.chart('container', {
  chart: { type: 'area' },
  series: [{
    data: [5, 7, 6, 9, 8],
    fillOpacity: 0.3        // also: opacity, fillColor
  }]
});

zones

Aplica estilo por rango de valor con zones a lo largo del eje y.

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [{
    data: [-4, -1, 2, 5, 3, 7],
    zones: [
      { value: 0, color: '#B43417' },
      { color: '#33503A' }
    ]
  }]
});

threshold · negativeColor

Define la línea base y colorea distinto todo lo que queda por debajo.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [3, -2, 5, -4, 2],
    threshold: 0,
    negativeColor: '#B43417'
  }]
});

animation

Ajusta la duración de la animación de entrada por serie.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [5, 8, 4, 9, 6],
    animation: { duration: 1200 }
  }]
});

events · cursor

Haz los puntos clicables con cursor y responde con los handlers de events.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    cursor: 'pointer',
    data: [5, 8, 4],
    events: {
      click: (e) => console.log(e.point.category)
    }
  }]
});

step · connectNulls

Dibuja líneas escalonadas y une los huecos de puntos null.

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Step', data: [3, 5, 5, 7, 6, 8], step: 'center' },
    { name: 'Gaps', data: [2, null, 4, 5, null, 6], connectNulls: true }
  ]
});

stacking · stack

Apila series una sobre otra con stacking: 'normal'.

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [
    { name: 'Online', data: [3, 5, 4, 6], stacking: 'normal' },
    { name: 'Store',  data: [2, 3, 3, 4], stacking: 'normal' }
  ]
});

pointStart · pointInterval

Genera los valores de x para un array plano de números.

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [{
    pointStart: 2019,
    pointInterval: 1,
    data: [4, 6, 5, 8, 7, 9]
  }]
});

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	true	Activa/desactiva el tooltip.
`shared / split`	boolean	false	Todas las series en una caja / callouts por serie.
`useHTML`	boolean	false	Renderizado HTML en lugar de SVG.
`headerFormat / pointFormat / footerFormat`	string	—	Plantillas para encabezado / cada fila / pie de página.
`formatter`	function	—	Control total; sobrescribe cadenas de formato.
`backgroundColor / borderColor / borderWidth / borderRadius`	string / string / number / number	'#fff' / — / 1 / 3	Estilos de caja.
`padding / shadow / animation`	number / boolean / boolean	8 / true / true	Padding de caja, sombra, transiciones.
`hideDelay`	number	500	ms antes de ocultar después de salir.
`followPointer / stickOnContact`	boolean	false	Sigue el cursor / se queda cuando se desplaza.
`snap / distance`	number	10 / 16	Distancia de disparo / brecha desde el punto.
`outside`	boolean	false	Renderiza fuera del contenedor para evitar recorte.
`valueDecimals / valuePrefix / valueSuffix`	number / string / string	—	Ayudantes de formato numérico.

Tokens de plantilla

Usa en headerFormat, pointFormat, footerFormat y dataLabels.format:

Token	Descripción
`{point.x} / {point.y} / {point.z}`	Valores X, Y y Z (burbuja).
`{point.key} / {point.name}`	Categoría/encabezado / nombre de punto (circular, embudo…).
`{point.color} / {point.percentage}`	Color de punto / porcentaje en series apiladas o circulares.
`{series.name}`	Nombre de la serie.
`{point.y:.2f}`	Y formateado a 2 decimales.

tooltip: {
  shared: true,
  formatter() {
    let html = '<b>' + this.x + '</b><br/>';
    this.points.forEach(p => {
      html += '<span style="color:' + p.color + '">\u25CF</span> '
            + p.series.name + ': <b>' + p.y.toLocaleString() + '</b><br/>';
    });
    return html;
  }
}

legend

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	true	Muestra/oculta la leyenda.
`layout`	string	'horizontal'	'horizontal' \| 'vertical'.
`align / verticalAlign`	string	'center' / 'bottom'	Posición dentro del gráfico.
`floating`	boolean	false	Flota sobre el contenido del gráfico.
`x / y / margin / padding`	number	0 / 0 / 15 / 8	Desplazamientos y espaciado.
`itemDistance / itemMarginTop / itemMarginBottom`	number	20 / 0 / 0	Espaciado entre elementos.
`symbolWidth / symbolHeight / symbolRadius / symbolPadding`	number	16 / 12 / 2 / 5	Tamaño de símbolo de leyenda.
`squareSymbol / reversed`	boolean	true / false	Símbolos cuadrados / invierte el orden de elementos.
`itemStyle / itemHoverStyle / itemHiddenStyle`	object	—	Estilos de texto de elemento por estado.
`backgroundColor / borderColor / borderWidth`	string / string / number	— / — / 0	Estilos de caja de leyenda.
`maxHeight`	number	—	Limita la altura; pagina cuando se supera.
`labelFormatter`	function	—	Texto de elemento personalizado (this = serie/punto).

plotOptions

Opciones de serie por defecto fusionadas en tres niveles: plotOptions.series (todos los tipos) → plotOptions[type] (un tipo) → series[i] (prioridad más alta).

plotOptions: {
  series: { animation: { duration: 1500 }, cursor: 'pointer' },
  column: { borderRadius: 4, groupPadding: 0.15 },
  line:   { lineWidth: 3, marker: { enabled: true, radius: 5 } }
}

colorAxis

Mapea valores a un gradiente de color (mapa de calor, treemap, coropleta). Objeto único o array.

Propiedad	Tipo	Valor por defecto	Descripción
`min / max`	number	—	Rango de valor; auto de los datos si se omite.
`minColor / maxColor`	string	—	Colores en cada extremo de la escala.
`stops`	array[]	—	Paradas de gradiente [[0,color],[0.5,color],[1,color]].
`type / reversed`	string / boolean	'linear' / false	Tipo de escala / invierte la dirección.
`dataClasses`	object[]	—	Clases discretas { from, to, color, name }.
`labels`	object	—	Etiquetas de leyenda del eje de color (forma de etiqueta de eje).

exporting

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	true	Habilita módulo de exportación + botón contextual.
`filename`	string	'chart'	Nombre de archivo por defecto (sin extensión).
`type`	string	'image/png'	Tipo MIME de exportación por defecto.
`scale`	number	2	Escala de resolución de ráster.
`printMaxWidth`	number	780	Ancho máximo al imprimir.
`buttons.contextButton`	object	—	{ enabled, menuItems, x, y }.
`csv`	object	—	{ columnHeaderFormatter, dateFormat, itemDelimiter, lineDelimiter, decimalPoint }.

Formatos: image/png, image/jpeg, image/svg+xml, application/pdf (necesita el opcional jspdf peer) y CSV.

responsive

Reglas que fusionan sobrescrituras de opciones cuando una condición de viewport coincide.

responsive: {
  rules: [
    { condition: { maxWidth: 500 },
      chartOptions: { legend: { enabled: false }, yAxis: { title: { text: null } } } },
    { condition: { maxWidth: 300 },
      chartOptions: { title: { text: null }, subtitle: { text: null } } }
  ]
}

Condición	Tipo	Descripción
`maxWidth / minWidth`	number	Aplica en o por debajo / por encima de este ancho.
`maxHeight / minHeight`	number	Aplica en o por debajo / por encima de esta altura.
`callback`	function	Predicado personalizado; recibe el gráfico.

accessibility

Propiedad	Tipo	Valor por defecto	Descripción
`enabled`	boolean	true	Activa/desactiva el módulo a11y.
`description`	string	—	Descripción para lectores de pantalla del gráfico.
`keyboardNavigation.enabled`	boolean	true	Navegación por teclado a través de elementos.
`keyboardNavigation.focusBorder`	object	—	Indicador de foco { color, margin, style }.
`keyboardNavigation.order`	string[]	—	Orden de tabulación de componentes.
`keyboardNavigation.seriesNavigation`	object	—	{ mode, skipNullPoints, pointNavigationEnabledThreshold }.
`announceNewData.enabled`	boolean	false	Anuncia datos nuevos vía región ARIA en vivo.
`highContrastMode`	string \| boolean	'auto'	true \| false \| 'auto' (detecta SO).
`point.descriptionFormatter`	function	—	Descripciones accesibles personalizadas por punto.

drilldown

Propiedad	Tipo	Valor por defecto	Descripción
`animation`	boolean \| object	true	Anima la transición de perforación.
`allowPointDrilldown`	boolean	true	Perfora haciendo clic en puntos individuales.
`series`	array	[]	Sub-series de perforación, cada una con un id único.
`drillUpButton`	object	—	{ relativeTo, position, theme }.
`breadcrumbs`	object	—	{ enabled, format, formatter, style, position }.

series: [{
  colorByPoint: true,
  data: [{ name: 'North', y: 310, drilldown: 'north' },
         { name: 'South', y: 260, drilldown: 'south' }]
}],
drilldown: {
  breadcrumbs: { enabled: true },
  series: [
    { id: 'north', data: [['NYC', 120], ['Boston', 95]] },
    { id: 'south', data: [['Miami', 90], ['Atlanta', 85]] }
  ]
}

navigator & rangeSelector

Chrome de series de tiempo/acciones a través de la katucharts.js punto de entrada. El navegador es un gráfico de vista previa en miniatura; el selector de rango añade botones de rango de tiempo preestablecido.

Propiedad	Tipo	Valor por defecto	Descripción
`navigator.enabled / height / margin`	boolean / number / number	true / 40 / 25	Activa/desactiva, redimensiona y espaciado del navegador.
`navigator.maskFill / outlineColor / outlineWidth`	string / string / number	rgba(102,133,194,.3) / '#ccc' / 1	Estilos de máscara y contorno.
`navigator.baseSeries / series`	number\|string / object	0 / —	Serie de origen / sobrescrituras de gráfico en miniatura.
`rangeSelector.enabled / selected`	boolean / number	true / —	Activa/desactiva / índice de botón inicial.
`rangeSelector.inputEnabled`	boolean	true	Campos de entrada de fecha.
`rangeSelector.buttons`	object[]	—	{ type, count, text } — type ∈ second…year, ytd, all.
`rangeSelector.dropdown`	string	'responsive'	'always' \| 'never' \| 'responsive'.

loading & credits

Propiedad	Tipo	Valor por defecto	Descripción
`loading.showDuration / hideDuration`	number	100	Transición de entrada/salida de la superposición de carga (ms).
`loading.style / labelStyle`	object	—	CSS de superposición y etiqueta.
`credits.enabled / text / href`	boolean / string / string	true / 'Powered by: KatuCharts' / —	Etiqueta de créditos.
`credits.position / style`	object	{ align:'right', verticalAlign:'bottom' }	Posicionamiento y estilos de créditos.

Muestra la superposición de carga con chart.showLoading() y ocúltala con chart.hideLoading().

Actualizaciones dinámicas

Una vez creado, el gráfico expone una API imperativa para cambiar datos, series y opciones en tiempo de ejecución sin recrearlo.

Método	Descripción
`chart.update(options, redraw?)`	Combina nuevas opciones y redibuja el gráfico (tipo, títulos, ejes, series…).
`chart.series[i]`	Accede a las instancias de serie renderizadas para actualizarlas individualmente.
`series.setData(data, redraw?, animation?)`	Reemplaza todos los datos de una serie.
`series.addPoint(point, redraw?, shift?)`	Añade un punto; con shift elimina el más antiguo (ventana deslizante).
`chart.addSeries(options, redraw?)`	Agrega una nueva serie en tiempo de ejecución.
`chart.setTitle(title, subtitle?)`	Actualiza el texto del título y del subtítulo.
`chart.showLoading(text?) / hideLoading()`	Muestra y oculta la superposición de carga.
`chart.redraw() / reflow()`	Fuerza un redibujado o reajusta el gráfico a su contenedor.
`chart.destroy()`	Destruye el gráfico y libera los escuchadores de eventos.

Ejemplos en vivo

Los dos gráficos siguientes usan la API de tiempo de ejecución: uno recibe nuevos puntos continuamente y el otro cambia de tipo con cada clic.

Datos en tiempo real

Una ventana deslizante de lecturas: cada segundo entra un valor nuevo, sale el más antiguo y la serie se redibuja con chart.series[0].setData(history).

const chart = KatuCharts.chart('container', {
  chart: { type: 'line', animation: false },
  yAxis: { min: 0, max: 100 },
  series: [{ name: 'Requests/s', data: history, marker: { enabled: false } }]
});

setInterval(() => {
  history.push(nextReading());
  history.shift();
  chart.series[0].setData(history);
}, 1000);

Cambiar de tipo

Los mismos datos se redibujan como otro tipo con chart.update definiendo un nuevo chart.type, sin recrear el gráfico.

const chart = KatuCharts.chart('container', {
  chart: { type: 'column' },
  xAxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'] },
  series: [{ name: 'Revenue', data: [42, 58, 35, 71, 49, 63] }]
});

columnButton.onclick = () => chart.update({ chart: { type: 'column' } });
barButton.onclick = () => chart.update({ chart: { type: 'bar' } });