Guia

Configuração

Um gráfico é um objeto de opções simples passado para KatuCharts.chart(container, options). Cada propriedade é opcional — os padrões são sensatos. Esta é a referência completa para cada chave de nível 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

Container geral, fundo, dimensões e modos de interação.

Propriedade	Tipo	Padrão	Descrição
`type`	string	'line'	Tipo de série padrão para séries que não definem seu próprio.
`width`	number \| null	null	Largura explícita em px. null preenche o container.
`height`	number \| string	400	Altura em px ou uma porcentagem como '56%' da largura. Defina null para ajustar a altura ao conteúdo automaticamente (limitada em viewports móveis curtos).
`backgroundColor`	string	'#ffffff'	Cor de fundo para toda a área do gráfico.
`borderColor / borderWidth / borderRadius`	string / number / number	— / 0 / 0	Estilo de borda do container.
`spacing`	number[]	[10,10,15,10]	Espaçamento ao redor do gráfico [top,right,bottom,left].
`margin`	number[] \| null	null	Margens explícitas da área de plot; substitui layout automático.
`animation`	boolean \| object	true	Alterna todas as animações, ou passa { duration, easing }.
`zoomType`	string	—	Eixo drag-to-zoom: 'x', 'y' ou 'xy'.
`panning`	boolean \| object	false	Panning quando ampliado. Objeto: { type }.
`panKey`	string	—	Chave pressionada para pan: 'shift', 'ctrl', 'alt'.
`inverted`	boolean	false	Troca eixos X e Y (gráfico horizontal).
`polar`	boolean	false	Renderiza todas as séries em coordenadas polares (radar).
`reflow`	boolean	true	Auto-redimensiona quando o container redimensiona.
`palette`	string[]	—	Paleta personalizada substituindo cores de tema.
`style`	object	—	CSS aplicado ao elemento container.
`events`	object	—	Listeners: load, redraw, render, selection, click, drilldown, drillup.
`plotBackgroundColor / plotBorderColor / plotBorderWidth`	string / string / number	—	Estilo da área de plot (dentro dos eixos).
`scrollablePlotArea`	object	—	Faz a área de plotagem rolar dentro de um viewport fixo: { minWidth, minHeight, scrollPositionX, scrollPositionY }. Mantém listas de categorias longas e séries temporais largas utilizáveis em telas pequenas.

chart.zooming

Propriedade	Tipo	Padrão	Descrição
`type`	string	—	Direção do zoom: 'x', 'y', 'xy'.
`key`	string	—	Chave modificadora: 'shift', 'ctrl', 'alt'.
`mouseWheel`	boolean \| object	—	Zoom com a roda do mouse — desativado por padrão; ative com true ou { enabled, sensitivity, type }. Em gráficos roláveis, a roda rola a área de plotagem em vez de dar zoom.
`pinchType`	string	—	Direção do pinch do toque: 'x', 'y', 'xy'.
`resetButton`	object	—	Botão de redefinir exibido após o zoom; restaura o intervalo original dos eixos. Personalize com { theme, position }.

title / subtitle

Mesma forma; o subtitle renderiza logo abaixo do title.

Propriedade	Tipo	Padrão	Descrição
`text`	string	'Chart title'	Conteúdo; null/' o oculta.
`align`	string	'center'	'left' \| 'center' \| 'right'.
`margin`	number	15	Espaço abaixo do title.
`style`	object	—	Estilos de texto CSS.
`x / y`	number	0 / —	Offsets em pixels da posição de alinhamento.
`floating`	boolean	false	Flutua sobre a área de plot.
`useHTML`	boolean	false	Permite HTML em vez de texto SVG.

xAxis / yAxis

Um objeto único ou um array para múltiplos eixos. xAxis e yAxis compartilham essas propriedades (os padrões diferem onde anotado).

Propriedade	Tipo	Padrão	Descrição
`type`	string	'linear'	'linear' \| 'logarithmic' \| 'datetime' \| 'category'.
`title.text`	string	null	Título do eixo; null o oculta.
`min / max`	number	—	Limites rígidos de eixo.
`softMin / softMax`	number	—	Limites suaves — estende até aqui se os dados não alcançarem.
`floor / ceiling`	number	—	Limites absolutos que o padding não pode cruzar.
`categories`	string[]	—	Rótulos de categoria; define tipo como 'category'.
`tickInterval / tickAmount`	number	—	Espaçamento de tick (ms em datetime) / contagem exata de tick.
`tickLength / tickWidth / tickColor`	number / number / string	10 / 1 / '#ccd6eb'	Estilo de marca de tick.
`gridLineWidth`	number	0 (x) / 1 (y)	Largura de linha de grade por tick.
`gridLineColor / gridLineDashStyle`	string / string	'#e6e6e6' / 'Solid'	Cor e traço da linha de grade.
`lineWidth / lineColor`	number / string	1 / '#ccd6eb'	Estilo da linha de eixo.
`offset`	number	0	Offset da borda da área de plot.
`opposite`	boolean	false	Coloca no lado oposto.
`reversed / visible`	boolean	false / true	Inverte direção / oculta o eixo.
`crosshair`	boolean \| object	false	Crosshair do ponteiro; objeto: { color, width, dashStyle }.
`plotBands / plotLines`	object[]	—	Bandas coloridas / linhas de referência (abaixo).
`startOnTick / endOnTick`	boolean	true	Encaixa os extremos do eixo aos ticks.
`minPadding / maxPadding`	number	0.01	Padding como uma fração do intervalo.
`allowDecimals`	boolean	true	Permite valores de tick decimais.
`id / linkedTo`	string / number\|string	—	Id do eixo / vincula extremos a outro eixo.
`scrollbar`	boolean \| object	false	Barra de rolagem por eixo para navegar quando a área de plotagem rola — { enabled, barBackgroundColor, trackBorderColor, … }.

Rótulos de eixo

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	true	Mostra/oculta rótulos de tick.
`format`	string	'{value}'	Template, ex: '${value}'.
`formatter`	function	—	Callback; recebe this.value.
`style`	object	—	Estilos CSS.
`rotation`	number	0	Rotação fixa em graus.
`autoRotation / autoRotationLimit`	number[] / number	[-45] / 80	Auto-rotaciona ângulos quando os rótulos se sobrepõem.
`step`	number	—	Mostra cada enésimo rótulo.
`padding`	number	5	Padding da linha de eixo.

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

O array no coração da config — uma entrada por conjunto de dados. Opções comuns primeiro; opções específicas de tipo seguem.

Propriedade	Tipo	Padrão	Descrição
`type`	string	'line'	Tipo de série; substitui chart.type.
`name`	string	—	Rótulo de legenda / tooltip.
`data`	array	[]	Pontos: números, [x,y], ou { x, y, name }.
`id`	string	—	Id para chart.get() e drilldown.
`color / colorIndex`	string / number	—	Substitui cor de paleta / índice de paleta.
`visible / showInLegend`	boolean	true	Visibilidade inicial / presença de legenda.
`lineWidth / lineColor`	number / string	2 / —	Estilo de linha.
`dashStyle`	string	'Solid'	Solid, Dash, Dot, ShortDash, LongDash, DashDot…
`fillColor / fillOpacity`	string / number	— / 0.75	Cor de preenchimento de área e opacidade.
`opacity`	number	1	Opacidade geral da série.
`marker / dataLabels`	object	—	Marcadores / rótulos de ponto (abaixo).
`stacking / stack`	string / string\|number	—	'normal' \| 'percent' / id de grupo de stack.
`step`	string \| boolean	false	Linha de passo: 'left' \| 'center' \| 'right'.
`connectNulls`	boolean	false	Desenha através de pontos nulos.
`threshold / negativeColor`	number / string	0 / —	Baseline de área / cor abaixo do threshold.
`enableMouseTracking / allowPointSelect`	boolean	true / false	Hover e click / click-to-select pontos.
`clip`	boolean	true	Recorta desenho para a área de plot.
`zones / zoneAxis`	object[] / string	— / 'y'	Zonas de estilo baseadas em valor (abaixo).
`animation / cursor`	boolean\|object / string	true / —	Animação de entrada / cursor de hover.
`xAxis / yAxis / zIndex`	number\|string	0 / 0 / —	Vincula eixos / ordem de stacking.
`pointStart / pointInterval`	number	0 / 1	Início X e passo para arrays de números flat.
`keys`	string[]	—	Mapeia colunas de array para props, ex: ['x','y','z'].
`drilldown`	string	—	Id da série de drilldown para clicks.

Colunas / Barras

Propriedade	Tipo	Padrão	Descrição
`pointPadding / groupPadding`	number	0.1 / 0.2	Padding dentro de um grupo / entre grupos.
`borderWidth / borderColor / borderRadius`	number / string / number	1 / '#fff' / 0	Estilo de borda de coluna.
`colorByPoint`	boolean	false	Colorir cada coluna da paleta.
`minPointLength`	number	0	Altura mínima da barra para valores pequenos.
`maxPointWidth / pointWidth`	number	—	Largura máxima / fixa da coluna em px.

Pizza / Rosca

Propriedade	Tipo	Padrão	Descrição
`innerSize`	number \| string	0	Diâmetro interno para roscas, ex: '50%'.
`size / center`	number\|string / array	— / ['50%','50%']	Diâmetro externo / centro [x,y].
`startAngle / endAngle`	number	0 / 360	Sweep de pizza (use <360 para pizza parcial).
`slicedOffset`	number	10	Offset em pixels para pontos cortados.

Marcador

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean \| null	null	null mostra automaticamente quando há poucos pontos.
`symbol`	string	'circle'	circle, square, diamond, triangle, triangle-down, ou URL.
`radius`	number	4	Raio do marcador.
`fillColor / lineColor / lineWidth`	string / string / number	— / — / 0	Preenchimento do marcador e borda.
`states.hover / states.select`	object	—	{ enabled, radius, fillColor, lineColor, lineWidth }.

Rótulos de dados

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	false	Habilita rótulos em cada ponto.
`format / formatter`	string / function	'{point.y}' / —	Template / callback (this.point, this.series).
`style / color`	object / string	—	Estilo de texto.
`backgroundColor / borderColor / borderRadius / padding`	string / string / number / number	— / — / 0 / 5	Estilo da caixa de rótulo.
`align / verticalAlign`	string	'center' / —	Alinhamento dentro do ponto.
`x / y / rotation`	number	0	Offsets e rotação.
`inside / allowOverlap`	boolean	false	Coloca dentro de barras / permite sobreposição.
`distance / connectorWidth / connectorColor`	number / number / string	— / 1 / —	Distância de rótulo de pizza e conector.

Estados de série

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
  ]
}]

Opções comuns, renderizadas

Estas opções valem para todos os tipos de série. Cada exemplo traz a configuração mínima necessária para ver a opção em ação.

color · colorByPoint

Pinte cada ponto pela paleta com colorByPoint, ou defina uma color explícita em um único ponto.

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

Oculte uma série no carregamento com visible: false, ou deixe-a fora da legenda com 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

Ative os marcadores de ponto e escolha símbolo e raio.

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

dataLabels

Mostre o valor em cada ponto; format aceita 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

Diferencie linhas pela espessura, padrão de traço e cor.

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

Controle a transparência da série e do preenchimento de área.

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

zones

Estilize a série por faixa de valor com zones ao longo do eixo y.

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

threshold · negativeColor

Defina a linha de base e dê outra cor a tudo que fica abaixo dela.

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

animation

Ajuste a duração da animação de entrada por série.

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

events · cursor

Torne os pontos clicáveis com cursor e responda pelos 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

Desenhe linhas em degraus e ligue lacunas deixadas por pontos 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

Empilhe séries umas sobre as outras com 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

Gere os valores de x para um array simples de números.

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

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	true	Alterna o tooltip.
`shared / split`	boolean	false	Todas as séries em uma caixa / callouts por-série.
`useHTML`	boolean	false	Renderização HTML em vez de SVG.
`headerFormat / pointFormat / footerFormat`	string	—	Templates para cabeçalho / cada linha / rodapé.
`formatter`	function	—	Controle total; substitui strings de formato.
`backgroundColor / borderColor / borderWidth / borderRadius`	string / string / number / number	'#fff' / — / 1 / 3	Estilo de caixa.
`padding / shadow / animation`	number / boolean / boolean	8 / true / true	Padding da caixa, sombra, transições.
`hideDelay`	number	500	ms antes de ocultar após sair.
`followPointer / stickOnContact`	boolean	false	Segue o cursor / fica quando pairado.
`snap / distance`	number	10 / 16	Distância de acionamento / gap do ponto.
`outside`	boolean	false	Renderiza fora do container para evitar recorte.
`valueDecimals / valuePrefix / valueSuffix`	number / string / string	—	Helpers de formatação numérica.

Tokens de template

Use em headerFormat, pointFormat, footerFormat e dataLabels.format:

Token	Descrição
`{point.x} / {point.y} / {point.z}`	Valores X, Y e Z (bolha).
`{point.key} / {point.name}`	Categoria/cabeçalho / nome do ponto (pizza, funil…).
`{point.color} / {point.percentage}`	Cor do ponto / porcentagem em série empilhada ou pizza.
`{series.name}`	Nome da série.
`{point.y:.2f}`	Y formatado para 2 casas decimais.

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

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	true	Mostra/oculta a legenda.
`layout`	string	'horizontal'	'horizontal' \| 'vertical'.
`align / verticalAlign`	string	'center' / 'bottom'	Posição dentro do gráfico.
`floating`	boolean	false	Flutua sobre conteúdo do gráfico.
`x / y / margin / padding`	number	0 / 0 / 15 / 8	Offsets e espaçamento.
`itemDistance / itemMarginTop / itemMarginBottom`	number	20 / 0 / 0	Espaçamento entre itens.
`symbolWidth / symbolHeight / symbolRadius / symbolPadding`	number	16 / 12 / 2 / 5	Tamanho do símbolo da legenda.
`squareSymbol / reversed`	boolean	true / false	Símbolos quadrados / inverte ordem de item.
`itemStyle / itemHoverStyle / itemHiddenStyle`	object	—	Estilos de texto de item por estado.
`backgroundColor / borderColor / borderWidth`	string / string / number	— / — / 0	Estilo de caixa de legenda.
`maxHeight`	number	—	Limita altura; pagina quando excedida.
`labelFormatter`	function	—	Texto de item personalizado (this = série/ponto).

plotOptions

Opções de série padrão mescladas em três níveis: plotOptions.series (todos os tipos) → plotOptions[type] (um tipo) → series[i] (prioridade máxima).

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

colorAxis

Mapeia valores para um gradiente de cor (heatmap, treemap, choropleth). Objeto único ou array.

Propriedade	Tipo	Padrão	Descrição
`min / max`	number	—	Intervalo de valor; auto dos dados se omitido.
`minColor / maxColor`	string	—	Cores em cada extremidade da escala.
`stops`	array[]	—	Paradas de gradiente [[0,color],[0.5,color],[1,color]].
`type / reversed`	string / boolean	'linear' / false	Tipo de escala / inverte direção.
`dataClasses`	object[]	—	Classes discretas { from, to, color, name }.
`labels`	object	—	Rótulos de legenda de eixo de cor (forma de rótulo de eixo).

exporting

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	true	Habilita módulo de exportação + botão de contexto.
`filename`	string	'chart'	Nome do arquivo padrão (sem extensão).
`type`	string	'image/png'	Tipo MIME de exportação padrão.
`scale`	number	2	Escala de resolução raster.
`printMaxWidth`	number	780	Largura máxima ao 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 (necessita o opcional jspdf peer) e CSV.

responsive

Regras que mesclam substituições de opção quando uma condição de viewport corresponde.

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

Condição	Tipo	Descrição
`maxWidth / minWidth`	number	Aplica em ou abaixo / acima desta largura.
`maxHeight / minHeight`	number	Aplica em ou abaixo / acima desta altura.
`callback`	function	Predicado personalizado; recebe o gráfico.

accessibility

Propriedade	Tipo	Padrão	Descrição
`enabled`	boolean	true	Alterna o módulo a11y.
`description`	string	—	Descrição de leitor de tela do gráfico.
`keyboardNavigation.enabled`	boolean	true	Navegação por teclado através de elementos.
`keyboardNavigation.focusBorder`	object	—	Indicador de foco { color, margin, style }.
`keyboardNavigation.order`	string[]	—	Ordem de tabulação de componentes.
`keyboardNavigation.seriesNavigation`	object	—	{ mode, skipNullPoints, pointNavigationEnabledThreshold }.
`announceNewData.enabled`	boolean	false	Anuncia novos dados via região ARIA live.
`highContrastMode`	string \| boolean	'auto'	true \| false \| 'auto' (detecta SO).
`point.descriptionFormatter`	function	—	Descrições acessíveis personalizadas por ponto.

drilldown

Propriedade	Tipo	Padrão	Descrição
`animation`	boolean \| object	true	Anima a transição de drilldown.
`allowPointDrilldown`	boolean	true	Drilldown clicando em pontos individuais.
`series`	array	[]	Sub-séries de drilldown, cada uma com um 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 estoque/série temporal via o katucharts.js ponto de entrada. O navegador é um gráfico de mini visão geral; o seletor de intervalo adiciona botões de intervalo de tempo predefinidos.

Propriedade	Tipo	Padrão	Descrição
`navigator.enabled / height / margin`	boolean / number / number	true / 40 / 25	Alterna, dimensiona e espaça o navegador.
`navigator.maskFill / outlineColor / outlineWidth`	string / string / number	rgba(102,133,194,.3) / '#ccc' / 1	Estilo de máscara e contorno.
`navigator.baseSeries / series`	number\|string / object	0 / —	Série de origem / substituições de mini-gráfico.
`rangeSelector.enabled / selected`	boolean / number	true / —	Alterna / índice de botão inicial.
`rangeSelector.inputEnabled`	boolean	true	Campos de entrada de data.
`rangeSelector.buttons`	object[]	—	{ type, count, text } — type ∈ second…year, ytd, all.
`rangeSelector.dropdown`	string	'responsive'	'always' \| 'never' \| 'responsive'.

loading & credits

Propriedade	Tipo	Padrão	Descrição
`loading.showDuration / hideDuration`	number	100	Fade in/out da sobreposição de carregamento (ms).
`loading.style / labelStyle`	object	—	CSS de sobreposição e rótulo.
`credits.enabled / text / href`	boolean / string / string	true / 'Powered by: KatuCharts' / —	Rótulo de créditos.
`credits.position / style`	object	{ align:'right', verticalAlign:'bottom' }	Posicionamento e estilo de créditos.

Mostra a sobreposição de carregamento com chart.showLoading() e a oculta com chart.hideLoading().

Atualizações dinâmicas

Depois de criado, o gráfico expõe uma API imperativa para alterar dados, séries e opções em tempo de execução, sem recriá-lo.

Método	Descrição
`chart.update(options, redraw?)`	Mescla novas opções e redesenha o gráfico (tipo, títulos, eixos, séries…).
`chart.series[i]`	Acessa as instâncias de série já renderizadas para atualizá-las individualmente.
`series.setData(data, redraw?, animation?)`	Substitui todos os dados de uma série.
`series.addPoint(point, redraw?, shift?)`	Acrescenta um ponto; com shift remove o mais antigo (janela deslizante).
`chart.addSeries(options, redraw?)`	Adiciona uma nova série em tempo de execução.
`chart.setTitle(title, subtitle?)`	Atualiza o texto do título e do subtítulo.
`chart.showLoading(text?) / hideLoading()`	Exibe e oculta a sobreposição de carregamento.
`chart.redraw() / reflow()`	Força um redesenho ou reajusta o gráfico ao contêiner.
`chart.destroy()`	Destrói o gráfico e libera os ouvintes de eventos.

Exemplos ao vivo

Os dois gráficos abaixo usam a API de tempo de execução: um recebe novos pontos continuamente, o outro troca de tipo a cada clique.

Dados em tempo real

Uma janela deslizante de leituras: a cada segundo um valor novo entra, o mais antigo sai e a série é redesenhada com 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);

Trocar de tipo

Os mesmos dados são redesenhados em outro tipo com chart.update, definindo um novo chart.type — sem recriar o 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' } });