Responsive font size for labels?

[qbixx]

I'm currently building a responsive Pie chart with Nivo. Because we are using quite long labels I would like to be able to adjust the fontSize of the labels based on the screen size.

I'm currently using the code below:

  return lines.map((line, index) => (
    <tspan
      key={index}
      x="0"
      dy={index === 0 ? "-1.1em" : "1em"}
      style={{
        fontSize: "14px",
        fill: "#000",
        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
        fontWeight: 700,
      }}
    >
      {line}
    </tspan>
  ));

Would it be possible to use 14px on mobile and 20px on desktop?

[plouc]

Nivo doesn't provide a specific mechanism for this, but maybe you could try with regular css?

[qbixx]

Thanks @plouc, I added a className to the labels which works. The font-size now changes based on the breakpoints.