DIY Gradient Bar Chart by DAX+SVG

[wujunmin]

Measure: 

Bar = 
VAR CityCount =
    DISTINCTCOUNT ( 'table'[city] )
VAR Height =30
VAR MaxSales =
    MAXX ( ALLSELECTED('table'), [revenue] ) / 300
VAR Color=
"<defs>
    <LinearGradient id='wu'>
        <Stop offset='0%' style='stop-color:White'/>
        <Stop offset='100%' style='stop-color:DarkCyan'/>
    </LinearGradient>
</defs>"
VAR BarTable =
    ADDCOLUMNS (
        SUMMARIZE (
            'table',
            'table'[city],
            "index", RANKX ( ALLSELECTED ( 'table' ), [revenue],,, DENSE )
        ),
        "Rect",
            "<rect x='0' y='" & ( [index] - 1 ) * Height & "' width='" & [revenue] / MaxSales & "' height='" & Height-2 & " ' rx='15' ry='15' fill='url(#wu)' />",
        "Text",
            "<text x='2' y='"
                & ( [index] - 1 ) * Height
                    + INT ( Height * 0.6 ) & "' fill='black' text-anchor='left' font-size='"
                & INT ( Height * 0.6 ) & "' >" & [city] & "["
                & ROUND ( [revenue], 0 ) & "]" & "</text>"
    )
VAR Bar =
    CONCATENATEX ( BarTable, [Rect] & [Text] )
VAR SVG = "<svg xmlns='http://www.w3.org/2000/svg' height='"&Height*CityCount&"' width='300' >" &Color& Bar & "</svg>"
RETURN
    IF ( HASONEVALUE ( 'table'[province] ), SVG, BLANK () )