Question: Titles make me crazy / sorry

[Phil353556]

Hello,

I tried without success, I didn't success to have several graphics on a single webpage with a title in bold for each. What I'm missing?

Is there a specific order to include
.bb-title tspan:first-child { font-size: 17px; font-weight: bold; }

is it correct to put tspan:first-child or is it another parameter ?

testtitle.html.txt

Thanks
Phil

[Phil353556]

FYI. I noticed on the webpage https://d3js.org/d3.v6.min.js however the v7 is available: https://d3js.org/d3.v7.min.js

The goal, is to have on a same webpage several graphics (type lines and type gauge) with the first line of the title in 17px and bold and the second line if any in 14px not bold
I found the 17px is not there and overridden by 14px.
see screenshots

After several tries, I detect that adding a second line to each title for each graphic solve the problem.
othertest.html.txt
othertest_with_secondline.html.txt

I will be happy to read you @netil
Best regards
Phil

[netil]

You need to deal with some css styling and specify correct css selector for this.

first line of the title in 17px and bold and the second line if any in 14px not bold

@Phil353556. do

/* style for the first line of title */
.bb-title tspan:first-child {
    font-size: 17px;
    font-weight: bold;
}

/* style for the second line of title */
.bb-title tspan:nth-child(2) {
    font-size: 14px;
}

[Phil353556]

hello @netil,
Thanks
It is Ok for graphics of type "Lines"
Does it should work in the same way for graphic of type "gauge" ?
Phil

[netil]

@Phil353556, the css rules selects "titles" regardless the chart type.

[Phil353556]

Hello @netil
I followed your advise and the .bb instruction, but sorry no success, only the fist line of the first graph is correct, no the others graphs.

Here attached is an example,
testbb.php.txt

I will be happy to read you
Phil

[heppa]

Hello @Phil353556, Please always create a jsfiddle or something similar for easy checking. (https://jsfiddle.net/)

I have created one for this now:
https://jsfiddle.net/wjLdrmn8/2/

This is a CSS /HTML issue more than a library issue.

When there is only one line of title, billboard does not create any tspan elements, but only one text element with the class "bb-title". You could have easily checked that by inspecting with eg. chrome. (right-click the title and click inspect).

replace your css with this:

/* style for the first line or only line of title */
text.bb-title tspan:first-child, text.bb-title{
    font-size: 17px;
    font-weight: bold;
}

/* style for the second line of title */
text.bb-title tspan:nth-child(2) {
    font-size: 14px;
    font-weight: normal;
}

you also need the text.bb-title as it only takes precedence like that due to the order of style loading.

[Phil353556]

@heppa
noted for https://jsfiddle.net/

You're incredible!
You're the best!

Thank you so much for your answer

Have a good day
Phil

[heppa]

@heppa noted for https://jsfiddle.net/

You're incredible! You're the best!

Thanks but nope, @netil is for providing this incredible library ! ;)

Have a good day Phil

You too and good luck!

[Phil353556]

Hello @heppa
Yes you're right of course. I already wrote and said that @netil is incredible. I made publicy for this library.
THIS is the graphic library to use. The best one

But you saved my day on these titles .. ok this is not a library issue but .bb css topic, anyway, thanks again
Phil