Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Change the number in a scatter chart with CSS


I'm trying to replace the data labels in a scatter chart with consecutive numbers with CSS.

As an example, I can use the below CSS to insert an "after" pseudo-element right after the actual value. If I do this, it should display first the original value, and then the inserted value, however only the original value is displayed even though I can see the ::after tag in the HTML.

If I create a blank HTML page and do a similar construction, this works fine - see the Fiddle link.

I've tried looking around in the CSS, but I can't seem to find anything that should be blocking this.

Any ideas?


     #UIComp_1 > svg > g.v-m-main > g.v-m-plot > g > g.v-m-datalabel > g > g:nth-child(1) > text:after {

          content: '1';



Fiddle link to example:

I'm using DS 1.5 and have tried both IE and Chrome. The dashboard is a clean one, only containing a data source and the scatter chart.



Former Member

I don't believe that CSS pseudo-selectors (:after) work with SVG text elements.

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question