# chart-line

The markup of every demo on <https://kuiper.oeds.it/chart-line/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## line

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-base" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-base')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line area

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-area" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-area')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, areaStyle: { opacity: 0.25 }, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line smooth

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-smooth" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-smooth')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, smooth: true, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line step

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-step" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-step')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, step: 'middle', label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line multiple

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-multi" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-multi')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: { show: false }, data: [220, 282, 291, 334, 390, 430] }, k.mute), Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: { show: false }, data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line stacked area

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-stack" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-stack')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, stack: 'total', areaStyle: { opacity: 0.25 }, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, stack: 'total', areaStyle: { opacity: 0.25 }, label: { show: false }, data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line gradient area

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-grad" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-grad')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: k.palette[0] }, { offset: 1, color: 'rgba(255, 255, 255, 0)' }]) }, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line with gaps

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-gaps" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-gaps')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, connectNulls: false, label: Object.assign({ position: 'top' }, k.value), data: [820, null, 901, null, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line log axis

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-log" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-log')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'log', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: Object.assign({ position: 'top' }, k.value), data: [1, 10, 100, 1000, 10000, 100000] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line time axis

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-time" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-time')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'time', axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: { show: false }, data: [[Date.UTC(2026, 0, 1), 820], [Date.UTC(2026, 1, 1), 932], [Date.UTC(2026, 2, 1), 901], [Date.UTC(2026, 3, 1), 934], [Date.UTC(2026, 4, 1), 1290], [Date.UTC(2026, 5, 1), 1330]] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line dual axis

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-dual" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-line-dual')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: ['jan', 'feb', 'mar', 'apr', 'may', 'jun'], boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks }, { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks }],
   series: [Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'line', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2 }, yAxisIndex: 1, label: { show: false }, data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## line large dataset

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-line-big" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  var big = window.kuiperChartBig;
  echarts.init(document.getElementById('chart-line-big')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   xAxis: { type: 'category', data: big.x, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'line', sampling: 'lttb', showSymbol: false, lineStyle: { width: 2 }, label: { show: false }, data: big.y }, k.mute)]
  });
 })();
 </script>
</div>
```
