How can I use custom styles with the Labels of a Pie Chart

OL Connect Professional Designer
1

I want to add additional styles to my labels of the pie chart. It doesn’t seem to be applying html tags, however, I was able to add the <br> tag to separate the label and value property. any ideas I want the labels to be color:#00B4D2 and the values to be bold and color:#B0008E

2

You can use CSS to style label and value differently:

#graph text tspan:first-of-type {
fill: #00B4D2;
}
#graph text tspan:last-of-type {
font-weight: bold;
fill: #B0008E;
}

In my case #graph is the ID of the pie chart.

Hope it helps…

3

When I enter a between my [[title]] and [[value]], the title appears next to the chart at the top and the value at the bottom, it doesn’t wrap the new line immediately under the title value.

Any ideas?

4

Please provide us with screenshots or more informations.

5

Please see here the dialog for controlling the labels and how I have it configured:

515×605 10.1 KB

And the result is this: (please bear in mind it’s off my page for now)

So the “727.44” should be directly below the “PRINCIPAL” label but it’s dropping to the bottom corner of the pie chart.

I’m using the CSS shown above to control the label formatting.

Any ideas?

6

Don’t worry about this.

I solved by rebuilding - I suspect it had something to do with the containing div and the styling applied therein.

Thanks anwyay.

7

How did you solve this? Would you know how to change the line height of the label? and possibly aligning the text in the center.

I would think that this css woud do the trick but it doesn’t.

#graph text_:first-of-type_ {

fill: #1b6c93;

font-family: GothamNarrowBook;

font-size:8pt;

line-height:0.7em;

}