HTML bar chart with arrows

Question

Hi&nbsp;i have started creating a bar chart with connecting arrows that show the difference between two columns using the HTML visual for PBI. the visual works well but now i want to add a third column that shows the target values in a third column on the right of the actuals with connecting arrows showing the difference between target and actuals.i have added below the code with the bars and arrows... does anyone have any idea how to add the third column.i have tried a couple of things following the same logic but i don't seem to get the desired result&nbsp;&nbsp;&nbsp;Comparison example = VAR color_left = "#c7c7c7"VAR color_right = "#0015b4"VAR text_left = "Last Year"VAR text_right = "Actuals"VAR value_left = [Last Year]VAR value_right = [Actuals]VAR relative_variance = FORMAT(DIVIDE(value_right,value_left,0)-1,"0%")VAR height1 = IF(value_left &gt; value_right, 160, ((value_left / value_right)*160 ))VAR height2 = IF(value_right &gt; value_left, 160, ((value_right / value_left)*160 ))RETURN"&lt;body&gt;&nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; :root{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --font-size: 150%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --percent-font-size: 150%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --text1: '"&amp;text_left&amp;"';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --text2: '"&amp;text_right&amp;"';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --number1: '"&amp;FORMAT(value_left, "#.#M")&amp;"';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --number2: '"&amp;FORMAT(value_right, "#.#M")&amp;"';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --height-bar1: "&amp;value_left&amp;"px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --height-bar2: "&amp;value_right&amp;"px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --color-bar1: "&amp;color_left&amp;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --color-bar2: "&amp;color_right&amp;";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container,&nbsp; &nbsp; &nbsp; &nbsp; .container *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 90vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-height: 90vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: grid;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-columns: 1fr 1fr;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-rows: auto 1fr;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-areas: 'arrows arrows'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'bar1 bar2';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-gap: 0 20%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: end;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0 10%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Open Sans', sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: var(--font-size:15px);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container_arrows{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-area: arrows;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 3rem;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container_arrows::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '"&amp;relative_variance&amp;"';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 25%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-weight: 800;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: var(--percent-font-size);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%,-100%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .arrows{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: visible;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar1{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: var(--color-bar1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "&amp;height1&amp;"%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar2{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: var(--color-bar2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "&amp;height2&amp;"%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, 120%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 800;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar1::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: var(--text1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar2::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: var(--text2);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -120%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar1::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: var(--number1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .bar2::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: var(--number2);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;div class='container'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='container_arrows'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;svg class='arrows' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 1000' xml:space='preserve' preserveAspectRatio='xMaxYMax'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;defs&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .arrow{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: scale(0.2) rotate(90deg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .arrow1{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(440px,"&amp;(((100 - height1) / 100) * 650) + 700&amp;"px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .arrow2{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(1640px,"&amp;(((100 - height2) / 100) * 650) + 700&amp;"px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/defs&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;g class='arrow1'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;path class='arrow' d='M415.934,212.799L36.788,2.097C32.411-0.377,28.65-0.661,25.51,1.242c-3.14,1.902-4.708,5.328-4.708,10.276V431.78&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0,4.952,1.569,8.381,4.708,10.284c3.14,1.902,6.901,1.622,11.278-0.855l379.146-210.703c4.381-2.478,6.571-5.434,6.571-8.856&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; C422.505,218.224,420.314,215.274,415.934,212.799z'/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/g&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;g class='arrow2'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;path class='arrow' d='M415.934,212.799L36.788,2.097C32.411-0.377,28.65-0.661,25.51,1.242c-3.14,1.902-4.708,5.328-4.708,10.276V431.78&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0,4.952,1.569,8.381,4.708,10.284c3.14,1.902,6.901,1.622,11.278-0.855l379.146-210.703c4.381-2.478,6.571-5.434,6.571-8.856&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; C422.505,218.224,420.314,215.274,415.934,212.799z'/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/g&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;polyline points='400,"&amp;(((100 - height1) / 100) * 650) + 700&amp;" 400,200 1600,200 1600,"&amp;(((100 - height2) / 100) * 650) + 700&amp;"'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill='none' stroke='black' stroke-width='15' /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ellipse cx='1000' cy='200' rx='200' ry='150' fill='#fff' stroke='black' stroke-width='10px' /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/svg&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='bar bar1'&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='bar bar2'&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt; &lt;/body&gt;"

v-yueyunzh-msft · Accepted Answer

Hi ,&nbsp;ANTOS&nbsp;
According to your description, you want to show three columns and three&nbsp;arrows in your html code .
Thanks for your sample html code to us~And sorry for i have lack html work experience , i test it in my side .
And for your need , i modify some css html code , you can test in your side , i also update some var in it :
Comparison example = 
VAR color_left = "#c7c7c7"
VAR color_right = "#0015b4"
VAR text_left = "Last Year"
VAR text_right = "Actuals"
VAR text_right2 = "Difference"
VAR value_left = 2021
VAR value_right = 2023
VAR value_right2 = "2021 vs 2023"
VAR relative_variance = FORMAT(DIVIDE(value_right,value_left,0)-1,"0%")
VAR height1 = IF(value_left &gt; value_right, 160, ((value_left / value_right)*160 ))
VAR height2 = IF(value_right &gt; value_left, 160, ((value_right / value_left)*160 ))
RETURN

"
&lt;body&gt;
    &lt;style&gt;
        :root{
            --font-size: 150%;
            --percent-font-size: 150%;
            --text1: '"&amp;text_left&amp;"';
            --text2: '"&amp;text_right&amp;"';
            --text3: '"&amp;text_right2&amp;"';
            --number1: '"&amp;FORMAT(value_left, "#.#M")&amp;"';
            --number2: '"&amp;FORMAT(value_right, "#.#M")&amp;"';
            --number3: '"&amp;FORMAT(value_right2, "#.#M")&amp;"';
            --height-bar1: "&amp;value_left&amp;"px;
            --height-bar2: "&amp;value_right&amp;"px;
            --color-bar1: "&amp;color_left&amp;";
            --color-bar2: "&amp;color_right&amp;";
        }
        .container,
        .container *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

.container{
            display: grid;
            align-items: end;
grid-template-rows: 500px 100px;
            grid-template-areas: 'myArea myArea myArea'      ;
            grid-gap: 10px;
       
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
            font-size: var(--font-size:15px);
        }
        .container::after{
            content: '';
            width: 100%;
            height: 2px;
            background-color: black;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .container_arrows{
           width: 100%;
            grid-area: myArea
          
        }
      
        .container_arrows::after{
            content: '"&amp;relative_variance&amp;"';
            position: absolute;
            left: 50%;
            top: 15%;
           font-weight: 800;
            font-size: var(--percent-font-size);
            transform: translate(-50%,-100%);
        }

.arrows{
            width: 100%;
            overflow: visible;
        }

.bar{
            position: relative;
            
        }
       
        .bar1{
            background-color: var(--color-bar1);
            height: "&amp;height1&amp;"%;
        }
        .bar2{
            background-color: var(--color-bar2);
            height: "&amp;height2&amp;"%;
        }
         .bar3{
            background-color: var(--color-bar2);
            height: "&amp;30&amp;"%;
        }

.bar::after{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 120%);
            font-weight: 800;
        }
        .bar1::after{
            content: var(--text1);
        }
        .bar2::after{
            content: var(--text2);
        }
         .bar3::after{
            content: var(--text3);
        }

.bar::before{
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -120%);
            font-weight: 700;
            font-size: 20px;
        }
        .bar1::before{
            content: var(--number1);
        }
        .bar2::before{
            content: var(--number2);
        }
        .bar3::before{
            content: var(--number3);
        }
    &lt;/style&gt;

&lt;div class='container'&gt;
        &lt;div class='container_arrows'&gt;
            &lt;svg class='arrows' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 3000 1000' xml:space='preserve' preserveAspectRatio='xMaxYMax'&gt;
                &lt;defs&gt;
                    &lt;style&gt;
                        .arrow{
                            transform: scale(0.2) rotate(90deg);
                        }
                        .arrow1{
                            transform: translate(440px,"&amp;(((100 - height1) / 100) * 650) + 700&amp;"px);
                        }
                        .arrow2{
                            transform: translate(1640px,"&amp;(((100 - height2) / 100) * 650) + 700&amp;"px);
                        }.arrow3{
                            transform: translate(2640px,"&amp;(((100 - height2) / 100) * 650) + 700&amp;"px);
                        }
                    &lt;/style&gt;
                &lt;/defs&gt;
                &lt;g class='arrow1'&gt;
                    &lt;path class='arrow' d='M415.934,212.799L36.788,2.097C32.411-0.377,28.65-0.661,25.51,1.242c-3.14,1.902-4.708,5.328-4.708,10.276V431.78
                        c0,4.952,1.569,8.381,4.708,10.284c3.14,1.902,6.901,1.622,11.278-0.855l379.146-210.703c4.381-2.478,6.571-5.434,6.571-8.856
                        C422.505,218.224,420.314,215.274,415.934,212.799z'/&gt;
                &lt;/g&gt;
                &lt;g class='arrow2'&gt;
                    &lt;path class='arrow' d='M415.934,212.799L36.788,2.097C32.411-0.377,28.65-0.661,25.51,1.242c-3.14,1.902-4.708,5.328-4.708,10.276V431.78
                        c0,4.952,1.569,8.381,4.708,10.284c3.14,1.902,6.901,1.622,11.278-0.855l379.146-210.703c4.381-2.478,6.571-5.434,6.571-8.856
                        C422.505,218.224,420.314,215.274,415.934,212.799z'/&gt;
                &lt;/g&gt;
                 &lt;g class='arrow3'&gt;
                    &lt;path class='arrow' d='M415.934,212.799L36.788,2.097C32.411-0.377,28.65-0.661,25.51,1.242c-3.14,1.902-4.708,5.328-4.708,10.276V431.78
                        c0,4.952,1.569,8.381,4.708,10.284c3.14,1.902,6.901,1.622,11.278-0.855l379.146-210.703c4.381-2.478,6.571-5.434,6.571-8.856
                        C422.505,218.224,420.314,215.274,415.934,212.799z'/&gt;
                &lt;/g&gt;
                &lt;polyline points='  400,"&amp;(((100 - height1) / 100) * 650) + 700&amp;" 400,200 1600,200 1600,"&amp;(((100 - height2) / 100) * 650) + 700&amp;" 1600,200 2600,200 2600,"&amp;(((100 - height2) / 100) * 650) + 700&amp;"    '
                fill='none' stroke='black' stroke-width='15' /&gt;
   &lt;ellipse cx='1000' cy='200' rx='200' ry='150' fill='#fff' stroke='black' stroke-width='10px' /&gt;
             
            &lt;/svg&gt;
        &lt;/div&gt;
        &lt;div class='bar bar1'&gt;&lt;/div&gt;
        &lt;div class='bar bar2'&gt; &lt;/div&gt;
        &lt;div class='bar bar3'&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;"
The result is as follows:

&nbsp;
&nbsp;
Thank you for your time and sharing, and thank you for your support and understanding of PowerBI!&nbsp;
&nbsp;
Best Regards,
Aniya Zhang
If this post&nbsp;helps, then please consider&nbsp;Accept it as the solution&nbsp;to help the other members find it more quickly
&nbsp;
&nbsp;

Forum Discussion

HTML bar chart with arrows

1 Reply

Related content

KPI Arrows - Up/Down Arrows

Retrieving data via HTML

Waterfall by HTML Help

UNICHAR: Green Up-arrow and Red Down-arrow

turn bar chart into arrow charts