whytheq whytheq - 1 month ago 8
CSS Question

Axes font needs to not be bold

I have the following live demo: plnkr.co

I'd like to:

1. Keep the axes tick marks

2. Keep the axes labels

3. Leave the axes lines hidden

How do I change the font of the axes labels so they are not bold ?

This I think is the section of the

css
that is getting confused:

.xAxis {
font-family: Verdana;
font-size: 8px;
font-weight: 200;
fill: black;
}

.xAxis text {
font: 8pt Verdana;
fill: black;
}

.yAxis {
font-family: Verdana;
font-size: 8px;
font-weight: 200;
fill: black;
/*shape-rendering: crispEdges;*/
}

.yAxis text {
font: 8pt Verdana;
fill: black;
}

.tick {
stroke: black;
fill: black;
shape-rendering: crispEdges;
}

.domain {
fill: none;
}

Answer

Add stroke: none; to yout .xAxis text-Definition like so:

.xAxis text {
    font: 8pt Verdana;
    stroke: none;
    fill: black;
}

You are not actually making the text bold here (like font-weight: bold;) but instead drawing a line around it. Thats also the reason why your text is so blurry, using strokes on (small) text elements is not a good idea in most cases.

Comments