{"id":2076,"date":"2026-07-24T09:33:45","date_gmt":"2026-07-24T09:33:45","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","title":{"rendered":"Diagramme en barres : disposition horizontale et optimisation des \u00e9tiquettes"},"content":{"rendered":"

Horizontal Diagrammes en barres<\/strong> sont id\u00e9aux pour afficher des donn\u00e9es de classement, des noms de cat\u00e9gories longs ou des m\u00e9triques de progression. En \u00e9tirant les barres le long de l’axe X, cette structure visuelle offre aux \u00e9tiquettes des cat\u00e9gories une ample place horizontale, \u00e9liminant ainsi la n\u00e9cessit\u00e9 de pencher ou de tronquer le texte. Que vous construisiez des tableaux de classement des dix premiers, des analyses des r\u00e9ponses aux sondages ou des comparaisons de performance horizontales, les diagrammes en barres offrent une lisibilit\u00e9 claire sur les \u00e9crans de bureau comme sur les \u00e9crans mobiles.<\/p>\n

Le fonctionnement des barres horizontales<\/h2>\n

Dans Apache ECharts, les diagrammes en colonnes et les diagrammes en barres utilisent exactement le m\u00eame 'bar'<\/code> type de s\u00e9rie. La transition vers une disposition horizontale s’effectue en attribuant directement les donn\u00e9es de cat\u00e9gorie \u00e0 l’axe vertical (yAxis<\/code>) et en d\u00e9finissant l’axe horizontal (xAxis<\/code>) comme axe de valeurs num\u00e9riques. Le moteur de graphique change la direction d’affichage, dessinant les barres horizontalement de gauche \u00e0 droite.<\/p>\n

1. Configuration essentielle<\/h3>\n

Pour cr\u00e9er un diagramme en barres horizontal de base, d\u00e9finissez type: 'category'<\/code> sur le yAxis<\/code> et fournissez votre tableau de donn\u00e9es, tout en d\u00e9finissant type: 'value'<\/code> sur le xAxis<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans 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: ['Br\u00e9sil', 'Indon\u00e9sie', '\u00c9tats-Unis', 'Inde', 'Chine']\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Les diagrammes en barres horizontales prennent en charge plusieurs groupes de donn\u00e9es, un surbrillance cibl\u00e9e et des traitements personnalis\u00e9s des coins pour les conceptions modernes de tableaux de bord.<\/p>\n
1. Comparaison horizontale multi-s\u00e9ries<\/h3>\n
Placez plusieurs objets dans le s\u00e9rie<\/code> tableau pour cr\u00e9er des barres horizontales group\u00e9es par \u00e9tiquette de cat\u00e9gorie :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans 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    l\u00e9gende: {\r\n        donn\u00e9es: ['Objectif 2025', 'R\u00e9alisation 2025']\r\n    },\r\n    axeX: {\r\n        type: 'valeur'\r\n    },\r\n    axeY: {\r\n        type: 'cat\u00e9gorie',\r\n        donn\u00e9es: ['Projet A', 'Projet B', 'Projet C', 'Projet D']\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            nom: 'Objectif 2025',\r\n            type: 'barre',\r\n            donn\u00e9es: [80, 95, 70, 85]\r\n        },\r\n        {\r\n            nom: 'R\u00e9alisation 2025',\r\n            type: 'barre',\r\n            donn\u00e9es: [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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Extr\u00e9mit\u00e9s arrondies et style de mise en \u00e9vidence<\/h3>\n
Appliquer des coins arrondis \u00e0 droite en utilisant borderRadius<\/code> sur les barres horizontales (en sp\u00e9cifiant [haut-droit, bas-droit, bas-gauche, haut-gauche]<\/code>):<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans 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    axeX: {\r\n        type: 'valeur'\r\n    },\r\n    axeY: {\r\n        type: 'cat\u00e9gorie',\r\n        donn\u00e9es: ['Recherche directe', 'Campagnes par e-mail', 'R\u00e9seaux sociaux', 'Recherche pay\u00e9e']\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            type: 'barre',\r\n            donn\u00e9es: [\r\n                120,\r\n                200,\r\n                {\r\n                    valeur: 450,\r\n                    style\u00c9l\u00e9ment: {\r\n                        couleur: '#fac858'\r\n                    }\r\n                },\r\n                280\r\n            ],\r\n            style\u00c9l\u00e9ment: {\r\n                couleur: '#91cc75',\r\n                borderRadius: [0, 6, 6, 0] \/\/ Arrondir uniquement les extr\u00e9mit\u00e9s droites\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Affinage du layout et de l’espacement<\/h2>\n
\u00c9tant donn\u00e9 que les \u00e9tiquettes de cat\u00e9gorie horizontales varient en longueur de texte, ajuster les marges gauche et l’alignement des \u00e9tiquettes \u00e9vite le d\u00e9coupage des \u00e9tiquettes.<\/p>\n
1. Marges de la grille du conteneur<\/h3>\n
Utilisez le bloc de configuration grid<\/code> pour allouer suffisamment d’espace aux \u00e9tiquettes longues de l’axe Y :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans 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    grille: {\r\n        gauche: '15%',  \/\/ Augmenter la marge gauche pour les textes de cat\u00e9gorie longs\r\n        droite: '8%',\r\n        bas: '10%',\r\n        contient\u00c9tiquette: true\r\n    },\r\n    axeX: {\r\n        type: 'valeur'\r\n    },\r\n    axeY: {\r\n        type: 'cat\u00e9gorie',\r\n        donn\u00e9es: [\r\n            'Modernisation de l\u2019infrastructure d\u2019entreprise',\r\n            'Migration vers le cloud phase 2',\r\n            'Optimisation de la base de donn\u00e9es',\r\n            'Redesign de la passerelle API'\r\n        ]\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            type: 'barre',\r\n            donn\u00e9es: [75, 60, 90, 40],\r\n            largeurBarre: '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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Meilleures pratiques strat\u00e9giques<\/h2>\n
    \n
  • Trier les donn\u00e9es intentionnellement :<\/strong> Disposez les barres horizontales dans l’ordre croissant ou d\u00e9croissant chaque fois que possible. Les listes class\u00e9es rendent imm\u00e9diatement \u00e9vidents les meilleurs performeurs pour les lecteurs.<\/li>\n
  • Utilisez containLabel: true<\/code>:<\/strong> Toujours inclure containLabel: true<\/code> \u00e0 l’int\u00e9rieur du grille<\/code> configuration pour \u00e9viter que les titres de cat\u00e9gorie longs d\u00e9bordent du bord de la zone de dessin.<\/li>\n
  • \u00c9tiquettes de valeurs directes :<\/strong> Pour des classements propres, envisagez d’afficher les valeurs de donn\u00e9es directement \u00e0 la fin de chaque barre en utilisant label: { show: true, position: 'right' }<\/code> et en masquant enti\u00e8rement l’axe num\u00e9rique inf\u00e9rieur.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Horizontal Diagrammes en barres sont id\u00e9aux pour afficher des donn\u00e9es de classement, des noms de cat\u00e9gories longs ou des m\u00e9triques de progression. En \u00e9tirant les barres le long de l’axe X, cette structure visuelle offre aux \u00e9tiquettes des cat\u00e9gories une…<\/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-2076","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\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagramme en barres : disposition horizontale et optimisation des \u00e9tiquettes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/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\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagramme en barres : disposition horizontale et optimisation des \u00e9tiquettes"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2076"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}