---
tags: charts
title: Bar chart vertical
description: Vertical bar chart for comparing values with upward-facing bars for intuitive value comparison.
---


%details.listitem.mb-md
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Initialize vertical bar chart
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical (target, targetDataY, targetDataX, itemWidth);
    .listitem-subheadline echarts_vertical.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import * as echarts from 'echarts';
          export function createChartVertical (target, targetDataY, targetDataX, itemWidth) {
            var chartHeight = 200;
            var labelHeight = 20;
            var dom = document.getElementById(target);
            var myChartVertical = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false,
              height: chartHeight + labelHeight
            });
            var itemWidthUser; 
            if (itemWidth) {
              var itemWidthUser = itemWidth;
            } else {
              itemWidthUser = targetDataX.length -1
            };
            var optionVertical;
            var optionVertical = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                height: chartHeight,
                top: '15',
                left: '0',
                right: '10',
                bottom: '0',
                containLabel: true
              },
              xAxis: {
                show: true,
                type: 'category',
                max: itemWidthUser,
                data: targetDataX,
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  width: 100,
                  overflow: "truncate",
                  ellipsis: '…',
                  hideOverlap: true,
                  interval: 0
                }
              },
              yAxis: {
                show: false,
                type: 'value'
              },
              series: [
                {
                  data: targetDataY,
                  type: 'bar',
                  barWidth: 15,
                  label: {
                    show: true,
                    position: 'center',
                    verticalAlign: 'top',
                    offset: [0, -15]
                  }
                }
              ]
            };
            if (optionVertical && typeof optionVertical === 'object') {
              myChartVertical.setOption(optionVertical);
            }
            window.addEventListener('resize', myChartVertical.resize);
          }

%p.mt-md.mb-xs With adaptive item width
.card.p-md.mb-xs
  .echarts-container#echarts-bar-vertical-1
%details.listitem.mb-md
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Create vertical bar chart with 6 items
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories);
    .listitem-subheadline data.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
          export let dataBugs = [
            { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
            { value: 37, name: 'High', itemStyle: {color: colorHigh}},
            { value: 19, name: 'Low', itemStyle: {color: colorLow}},
            { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
            { value: 53, name: 'Content', itemStyle: {color: colorContent}},
            { value: 53, name: 'UX', itemStyle: {color: colorUX}},
          ];
          export let dataBugsCategories = [
            { value:'Critical'},
            { value: 'High'},
            { value: 'Low'},
            { value: 'Visual'},
            { value: 'Content'},
            { value: 'UX'}
          ];
    .listitem-subheadline colors.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          export const colorCritical = '#FF3131';
          export const colorHigh = '#d8ce0d';
          export const colorLow = '#9fa2a8';
          export const colorVisual = '#f48d21';
          export const colorContent = '#326dd1';
          export const colorUX = '#263340';
          export const colorSuccess = '#8cbd24';
          export const colorDanger = '#FF3131';
          export const colorNeutral = '#e6e6e6';
          export const colorInfo = '#326dd1';
          export const colorBlueLight = '#21bef4';

.card.p-md.mb-xs
  .echarts-container#echarts-bar-vertical-2
%details.listitem.mb-md
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Create vertical bar chart with 3 items
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew);
    .listitem-subheadline data.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
          export let dataBugsFew = [
            { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
            { value: 37, name: 'High', itemStyle: {color: colorHigh}},
            { value: 19, name: 'Low', itemStyle: {color: colorLow}}
          ];
          export let dataBugsCategoriesFew = [
            { value:'Critical'},
            { value: 'High'},
            { value: 'Low'}
          ];
    .listitem-subheadline colors.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          export const colorCritical = '#FF3131';
          export const colorHigh = '#d8ce0d';
          export const colorLow = '#9fa2a8';
          export const colorVisual = '#f48d21';
          export const colorContent = '#326dd1';
          export const colorUX = '#263340';
          export const colorSuccess = '#8cbd24';
          export const colorDanger = '#FF3131';
          export const colorNeutral = '#e6e6e6';
          export const colorInfo = '#326dd1';
          export const colorBlueLight = '#21bef4';

.card.p-md.mb-md
  .echarts-container#echarts-bar-vertical-2-fixed
%details.listitem
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Create vertical bar chart with 3 items and fixed width
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, 10);
    .listitem-subheadline data.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
          export let dataBugsFew = [
            { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
            { value: 37, name: 'High', itemStyle: {color: colorHigh}},
            { value: 19, name: 'Low', itemStyle: {color: colorLow}}
          ];
          export let dataBugsCategoriesFew = [
            { value:'Critical'},
            { value: 'High'},
            { value: 'Low'}
          ];
    .listitem-subheadline colors.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          export const colorCritical = '#FF3131';
          export const colorHigh = '#d8ce0d';
          export const colorLow = '#9fa2a8';
          export const colorVisual = '#f48d21';
          export const colorContent = '#326dd1';
          export const colorUX = '#263340';
          export const colorSuccess = '#8cbd24';
          export const colorDanger = '#FF3131';
          export const colorNeutral = '#e6e6e6';
          export const colorInfo = '#326dd1';
          export const colorBlueLight = '#21bef4';

.card.p-xs.mb-md
  .echarts-container#echarts-bar-vertical-3
%details.listitem.mb-md
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Create vertical bar chart with longer item names
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany);
    .listitem-subheadline data.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          export let dataFeaturesManyNumbers = [
            8, 33, 64, 23, 55, 77, 39, 57
          ];
          export let dataFeaturesMany = [
            'Feature A', 
            'Feature B', 
            'Feature with a very long name', 
            'Feature with an even longer name', 
            'ABC', 
            'ZDF', 
            'WWW',
            'Just another feature name'
          ];

.card.p-md.mb-md
  .echarts-container#echarts-bar-vertical-3-fixed
%details.listitem.mb-md
  %summary.listitem-header
    .listitem-title
      %span.icon.icon-format-code.mr-xs
      Create vertical bar chart with longer item names and fixed width
    .listitem-metrics
    .listitem-actions
      .btn.collapse-btn
  .listitem-content
    .listitem-subheadline HTML
    .listitem-card
      %code .echarts-container#element-id
    .listitem-subheadline app.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          import { createChartVertical } from './modules/echarts_vertical';
          createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, 10);
    .listitem-subheadline data.js
    .listitem-card
      %pre.code.break-spaces
        :plain
          export let dataFeaturesManyNumbers = [
            8, 33, 64, 23, 55, 77, 39, 57
          ];
          export let dataFeaturesMany = [
            'Feature A', 
            'Feature B', 
            'Feature with a very long name', 
            'Feature with an even longer name', 
            'ABC', 
            'ZDF', 
            'WWW',
            'Just another feature name'
          ];