# chart-bar

The markup of every demo on <https://kuiper.oeds.it/chart-bar/>, 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-`.

## bar

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-base" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-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: true, 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: 'bar', barMaxWidth: 32, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar horizontal

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

## bar grouped

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-group" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-group')).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: true, 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: 'bar', barMaxWidth: 20, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'bar', barMaxWidth: 20, label: { show: false }, data: [220, 282, 291, 334, 390, 430] }, k.mute), Object.assign({ type: 'bar', barMaxWidth: 20, label: { show: false }, data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar stacked

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-stack" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-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: true, 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: 'bar', stack: 'total', barMaxWidth: 32, label: Object.assign({ position: 'inside' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'bar', stack: 'total', barMaxWidth: 32, label: Object.assign({ position: 'inside' }, k.value), data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar stacked full

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-full" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-full')).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: true, axisTick: { show: false }, axisLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   yAxis: { type: 'value', max: 100, axisLine: { show: false }, splitLine: { lineStyle: { color: k.rule } }, axisLabel: k.ticks },
   series: [Object.assign({ type: 'bar', stack: 'total', barMaxWidth: 32, label: Object.assign({ position: 'inside' }, k.value), data: [70, 72, 68, 74, 80, 81] }, k.mute), Object.assign({ type: 'bar', stack: 'total', barMaxWidth: 32, label: Object.assign({ position: 'inside' }, k.value), data: [30, 28, 32, 26, 20, 19] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar rounded

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-round" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-round')).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: true, 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: 'bar', barMaxWidth: 32, itemStyle: { borderRadius: [8, 8, 0, 0] }, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar negative

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-neg" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-neg')).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: true, 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: 'bar', barMaxWidth: 32, label: { show: false }, data: [820, -320, 901, -434, 1290, -130] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar background

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-bg" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-bg')).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: true, 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: 'bar', barMaxWidth: 32, showBackground: true, backgroundStyle: { color: k.rule }, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar overlap

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-over" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-over')).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: true, 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: 'bar', barGap: '-45%', barMaxWidth: 32, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute), Object.assign({ type: 'bar', barMaxWidth: 20, label: { show: false }, data: [120, 182, 191, 234, 290, 330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar color by data

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-colorby" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-colorby')).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: true, 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: 'bar', colorBy: 'data', barMaxWidth: 32, label: Object.assign({ position: 'top' }, k.value), data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar waterfall

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-water" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-water')).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: true, 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: 'bar', stack: 'total', barMaxWidth: 32, itemStyle: { color: 'transparent' }, label: { show: false }, data: [0, 820, 1752, 2653, 3587, 4877] }, k.mute), Object.assign({ type: 'bar', stack: 'total', barMaxWidth: 32, label: { show: false }, data: [820, 932, 901, 934, 1290, 1330] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar log axis

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-log" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-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: true, 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: 'bar', barMaxWidth: 32, label: Object.assign({ position: 'top' }, k.value), data: [1, 10, 100, 1000, 10000, 100000] }, k.mute)]
  });
 })();
 </script>
</div>
```

## bar with line

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-bar-line" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-bar-line')).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: true, 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: 'bar', barMaxWidth: 32, 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)]
  });
 })();
 </script>
</div>
```

## bar horizontal stacked

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