Chart Line

Chart

Una línea. No fuerza el cero en el eje: forzarlo aplastaría la señal contra el techo.

Línea simple

Con curve="monotone" la curva no inventa extremos: nunca dibuja un máximo entre dos puntos donde no hay ningún dato.

Ene Feb Mar Abr May Jun

Ingresos por mes
Categoría	Ingresos
Ene	1,2k
Feb	3,2k
Mar	2,5k
Abr	4,9k
May	4,3k
Jun	6,1k

<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" dots />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" dots />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Varias series

Cada marca line es una serie independiente, con su propio color de la paleta y su propia entrada en la leyenda.

0 € 1.000 € 2.000 € 3.000 € 4.000 € 5.000 € 6.000 € 7.000 €

Ene Feb Mar Abr May Jun

Ingresos y gastos por mes
Categoría	Ingresos	Gastos
Ene	1.240 €	800 €
Feb	3.180 €	1.500 €
Mar	2.470 €	1.100 €
Abr	4.910 €	2.200 €
May	4.300 €	1.900 €
Jun	6.120 €	2.600 €

<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" />
    <x-kore::chart.line y="gastos"   label="Gastos"   curve="monotone" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>

<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" />
    <x-kore::chart.line y="gastos"   label="Gastos"   curve="monotone" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>

Curvas

Tres formas de interpolar entre puntos: linear, monotone y step. Fíjate en el pico: monotone lo suaviza sin salirse nunca del rango de los dos puntos que lo rodean.

Linear

Curva Linear
Categoría	valor
A	20
B	90
C	30
D	70
E	40

Monotone

Curva Monotone
Categoría	valor
A	20
B	90
C	30
D	70
E	40

Step

Curva Step
Categoría	valor
A	20
B	90
C	30
D	70
E	40

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="linear" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="monotone" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="step" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="linear" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="monotone" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

<x-kore::chart :data="$datos" x="punto" height="10rem">
    <x-kore::chart.line y="valor" curve="step" dots />
    <x-kore::chart.axis-y :ticks="3" />
    <x-kore::chart.axis-x />
</x-kore::chart>

Puntos

Con dots se pinta un punto por dato. Es un div por punto: con 10.000 puntos el HTML pesa 1,4 MB. Sin ellos, el trazo es un solo nodo y el número de datos no importa.

Sin dots

Ingresos sin puntos
Categoría	ingresos
Ene	1.240
Feb	3.180
Mar	2.470
Abr	4.910

Con dots

Ingresos con puntos
Categoría	ingresos
Ene	1.240
Feb	3.180
Mar	2.470
Abr	4.910

{{-- Sin puntos: un solo nodo, da igual cuántos datos haya --}}
<x-kore::chart.line y="ingresos" curve="monotone" />

{{-- Con puntos: un div por dato --}}
<x-kore::chart.line y="ingresos" curve="monotone" dots />

{{-- Sin puntos: un solo nodo, da igual cuántos datos haya --}}
<x-kore::chart.line y="ingresos" curve="monotone" />

{{-- Con puntos: un div por dato --}}
<x-kore::chart.line y="ingresos" curve="monotone" dots />

Huecos en los datos

Un valor null no es un cero: es «no hay dato». La línea se corta ahí, en vez de dibujar una caída al suelo que nunca ocurrió.

Ene Feb Mar Abr May Jun

Temperatura del sensor
Categoría	Sensor
Ene	21,4
Feb	23,1
Mar	—
Abr	—
May	25,8
Jun	24,2

<x-kore::chart :data="$conHuecos" x="mes">
    <x-kore::chart.line y="sensor" label="Sensor" curve="monotone" dots />

    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- El sensor se cayó en marzo y abril --}}
$conHuecos = [
    ['mes' => 'Mar', 'sensor' => null],
    ['mes' => 'Abr', 'sensor' => null],
];

<x-kore::chart :data="$conHuecos" x="mes">
    <x-kore::chart.line y="sensor" label="Sensor" curve="monotone" dots />

    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- El sensor se cayó en marzo y abril --}}
$conHuecos = [
    ['mes' => 'Mar', 'sensor' => null],
    ['mes' => 'Abr', 'sensor' => null],
];

Distancia máxima entre puntos

max-gap corta el trazo cuando dos puntos consecutivos están más lejos de lo que permite, en vez de dibujar una curva suave sobre un hueco que nadie midió. Sólo tiene sentido en un eje temporal continuo.

feb.2026 2 3 4 5 6 7 8

Temperatura del sensor, con el hueco visible
Categoría	Temperatura
1 feb. 2026	21,4
2 feb. 2026	22,1
6 feb. 2026	19,8
7 feb. 2026	20,3
8 feb. 2026	21,9

max-gap acepta «30s», «5m», «2h», «7d», «1w», o un número en las unidades del eje. Sin él, el trazo cruza cualquier hueco con una curva que nadie midió.

<x-kore::chart :data="$sensor" x="medido_en">
    <x-kore::chart.line y="temp" label="Temperatura" curve="monotone" dots max-gap="2d" />

    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- El sensor midió a diario, pero del 3 al 5 de febrero no hay filas: son dos días de hueco --}}
$sensor = [
    ['medido_en' => Carbon::parse('2026-02-01'), 'temp' => 21.4],
    ['medido_en' => Carbon::parse('2026-02-02'), 'temp' => 22.1],
    ['medido_en' => Carbon::parse('2026-02-06'), 'temp' => 19.8],
    ['medido_en' => Carbon::parse('2026-02-07'), 'temp' => 20.3],
    ['medido_en' => Carbon::parse('2026-02-08'), 'temp' => 21.9],
];

<x-kore::chart :data="$sensor" x="medido_en">
    <x-kore::chart.line y="temp" label="Temperatura" curve="monotone" dots max-gap="2d" />

    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- El sensor midió a diario, pero del 3 al 5 de febrero no hay filas: son dos días de hueco --}}
$sensor = [
    ['medido_en' => Carbon::parse('2026-02-01'), 'temp' => 21.4],
    ['medido_en' => Carbon::parse('2026-02-02'), 'temp' => 22.1],
    ['medido_en' => Carbon::parse('2026-02-06'), 'temp' => 19.8],
    ['medido_en' => Carbon::parse('2026-02-07'), 'temp' => 20.3],
    ['medido_en' => Carbon::parse('2026-02-08'), 'temp' => 21.9],
];

Props

Prop	Tipo	Default	Descripción
`y`	string	—	La clave del valor en cada fila
`label`	string	null	El nombre de la serie. Sin él, se usa y
`color`	string	null	Un token (destructive, success…) o un color CSS. Por defecto, el de la paleta
`curve`	string	linear	linear, monotone o step
`dots`	bool	false	Pintar un punto por dato
`maxGap`	string\|int	null	Distancia máxima entre dos puntos antes de que el trazo se parta. Atributo max-gap. Sólo en eje continuo
`show`	bool	true	show=false la oculta pero le reserva su color de la paleta

En esta página

Línea simple Varias series Curvas Puntos Huecos en los datos Distancia máxima entre puntos Props