Skip to Content
avatar image
Former Member

CSS for Column Chart with 3 measures

I want the following three bars to have different border and fill colours.

Each bar is a different measure:

Currently all three bars are being impacted by the following CSS Class

.myBar g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect

{

fill:white;

stroke:#cb6015;

}

How do I differentiate between the three measure bars using CSS class groups?

I’ve spent a lot time trying to work out the class groups using F12 in Internet Explorer, and reading other posts …but no joy.

Design Studio 1.6 SP1

Thanks in advance.

Greg

bar-chart.png (1.7 kB)
data-source.png (12.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Nov 08, 2016 at 01:57 AM

    maby you can run it in fox browser,then you can find the id or class of the three bars .

    fox is better than IE in this.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 08, 2016 at 07:39 AM

    Hi Greg,

    Use the below CSS to change the border and color as needed.

    .bar rect[fill="#800000"]

    { stroke-width:5px;

    stroke: yellow ;

    stroke-dasharray:3px;

    fill: blue;

    }

    In the square bracket, give the hex value of color of the bar you need to change.

    Thanks,

    Poovarasan

    Add comment
    10|10000 characters needed characters exceeded