{"id":2072,"date":"2026-07-24T09:33:45","date_gmt":"2026-07-24T09:33:45","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/bar-chart-horizontal-layout-and-label-optimization-guide\/"},"modified":"2026-07-24T09:33:45","modified_gmt":"2026-07-24T09:33:45","slug":"bar-chart-horizontal-layout-and-label-optimization-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","title":{"rendered":"Gr\u00e1fico de Barras: Disposi\u00e7\u00e3o Horizontal e Otimiza\u00e7\u00e3o de R\u00f3tulos"},"content":{"rendered":"

Horizontal Gr\u00e1ficos de Barras<\/strong>s\u00e3o ideais para exibir dados de classifica\u00e7\u00e3o, nomes de categorias longos ou m\u00e9tricas de progresso. Ao estender as barras ao longo do eixo X, essa estrutura visual oferece bastante espa\u00e7o horizontal para os r\u00f3tulos das categorias, eliminando a necessidade de inclinar ou truncar o texto. Seja voc\u00ea construindo tabelas de classifica\u00e7\u00e3o dos 10 principais, an\u00e1lises de respostas de pesquisas ou compara\u00e7\u00f5es de desempenho horizontais, os gr\u00e1ficos de barras garantem legibilidade clara em telas de desktop e m\u00f3veis.<\/p>\n

Os Mecanismos das Barras Horizontais<\/h2>\n

No Apache ECharts, gr\u00e1ficos de colunas e gr\u00e1ficos de barras usam exatamente o mesmo 'bar'<\/code> tipo de s\u00e9rie. A transi\u00e7\u00e3o para uma disposi\u00e7\u00e3o horizontal ocorre ao atribuir os dados da categoria diretamente ao eixo vertical (yAxis<\/code>) e definindo o eixo horizontal (xAxis<\/code>) como um eixo de valor num\u00e9rico. O motor do gr\u00e1fico gira a dire\u00e7\u00e3o de renderiza\u00e7\u00e3o, desenhando as barras horizontalmente da esquerda para a direita.<\/p>\n

1. Configura\u00e7\u00e3o B\u00e1sica<\/h3>\n

Para criar um gr\u00e1fico de barras horizontal b\u00e1sico, defina type: 'category'<\/code> no yAxis<\/code> e forne\u00e7a seu array de dados, enquanto define type: 'value'<\/code> no xAxis<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Brasil', 'Indon\u00e9sia', 'EUA', '\u00cdndia', 'China']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [214, 273, 331, 1380, 1411]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas Estruturais Avan\u00e7adas<\/h2>\n
Gr\u00e1ficos de barras horizontais suportam m\u00faltiplos grupos de dados, realce direcionado e tratamentos personalizados de cantos para designs modernos de pain\u00e9is.<\/p>\n
1. Compara\u00e7\u00e3o Horizontal de M\u00faltiplas S\u00e9ries<\/h3>\n
Coloque m\u00faltiplos objetos no s\u00e9rie<\/code> array para criar barras horizontais agrupadas por r\u00f3tulo de categoria:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
opcao = {\r\n    legenda: {\r\n        dados: ['Meta 2025', 'Real 2025']\r\n    },\r\n    eixoX: {\r\n        tipo: 'valor'\r\n    },\r\n    eixoY: {\r\n        tipo: 'categoria',\r\n        dados: ['Projeto A', 'Projeto B', 'Projeto C', 'Projeto D']\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            nome: 'Meta 2025',\r\n            tipo: 'barra',\r\n            dados: [80, 95, 70, 85]\r\n        },\r\n        {\r\n            nome: 'Real 2025',\r\n            tipo: 'barra',\r\n            dados: [85, 90, 75, 92]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Pontas arredondadas e estiliza\u00e7\u00e3o de destaque<\/h3>\n
Aplicar cantos direitos arredondados usando borderRadius<\/code> nas barras horizontais (especificando [superior-direito, inferior-direito, inferior-esquerdo, superior-esquerdo]<\/code>):<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
opcao = {\r\n    eixoX: {\r\n        tipo: 'valor'\r\n    },\r\n    eixoY: {\r\n        tipo: 'categoria',\r\n        dados: ['Pesquisa Direta', 'Campanhas de E-mail', 'M\u00eddias Sociais', 'Pesquisa Paga']\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            tipo: 'barra',\r\n            dados: [\r\n                120,\r\n                200,\r\n                {\r\n                    valor: 450,\r\n                    estiloItem: {\r\n                        cor: '#fac858'\r\n                    }\r\n                },\r\n                280\r\n            ],\r\n            estiloItem: {\r\n                cor: '#91cc75',\r\n                borderRadius: [0, 6, 6, 0] \/\/ Arredondar apenas as pontas direitas\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Ajuste fino do layout e espa\u00e7amento<\/h2>\n
Como os r\u00f3tulos de categoria horizontais variam em comprimento de texto, ajustar as margens esquerdas e a alinhamento dos r\u00f3tulos evita o corte dos r\u00f3tulos.<\/p>\n
1. Margens da grade do cont\u00eainer<\/h3>\n
Use o bloco de configura\u00e7\u00e3o grid<\/code> para alocar espa\u00e7o suficiente para r\u00f3tulos longos do eixo Y:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
opcao = {\r\n    grade: {\r\n        esquerda: '15%',  \/\/ Aumentar a margem esquerda para texto longo de categoria\r\n        direita: '8%',\r\n        inferior: '10%',\r\n        contemR\u00f3tulo: true\r\n    },\r\n    eixoX: {\r\n        tipo: 'valor'\r\n    },\r\n    eixoY: {\r\n        tipo: 'categoria',\r\n        dados: [\r\n            'Moderniza\u00e7\u00e3o da Infraestrutura Empresarial',\r\n            'Migra\u00e7\u00e3o para a Nuvem Fase 2',\r\n            'Otimiza\u00e7\u00e3o do Banco de Dados',\r\n            'Reconstru\u00e7\u00e3o do Gateway de API'\r\n        ]\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            tipo: 'barra',\r\n            dados: [75, 60, 90, 40],\r\n            larguraBarra: '50%'\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Pr\u00e1ticas recomendadas estrat\u00e9gicas<\/h2>\n
    \n
  • Organize os dados intencionalmente:<\/strong> Organize as barras horizontais em ordem crescente ou decrescente sempre que poss\u00edvel. Listas classificadas tornam os melhores desempenhos imediatamente \u00f3bvios para os leitores.<\/li>\n
  • Use containLabel: true<\/code>:<\/strong> Sempre inclua containLabel: true<\/code> dentro do grade<\/code> configura\u00e7\u00e3o para evitar que t\u00edtulos longos de categorias transbordem da borda da tela.<\/li>\n
  • R\u00f3tulos de Valor Direto:<\/strong> Para classifica\u00e7\u00f5es limpas, considere exibir os valores de dados diretamente na extremidade de cada barra usando label: { show: true, position: 'right' }<\/code> e ocultando completamente o eixo num\u00e9rico inferior.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Horizontal Gr\u00e1ficos de Barrass\u00e3o ideais para exibir dados de classifica\u00e7\u00e3o, nomes de categorias longos ou m\u00e9tricas de progresso. Ao estender as barras ao longo do eixo X, essa estrutura visual oferece bastante espa\u00e7o horizontal para os r\u00f3tulos das categorias, eliminando…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":2,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2072","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Bar Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"name\":\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"datePublished\":\"2026-07-24T09:33:45+00:00\",\"description\":\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gr\u00e1fico de Barras: Disposi\u00e7\u00e3o Horizontal e Otimiza\u00e7\u00e3o de R\u00f3tulos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_locale":"pt_PT","og_type":"article","og_title":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","og_description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","name":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","datePublished":"2026-07-24T09:33:45+00:00","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gr\u00e1fico de Barras: Disposi\u00e7\u00e3o Horizontal e Otimiza\u00e7\u00e3o de R\u00f3tulos"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2072"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}