How to change legend font size?

I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?

Version

2.1.2267

JavaScript

info vcanus asked 4 months ago

You must login to post comments

Answers (3)

Hi there,

There are some classes which you can target to style the legend in SciChart.js.

Take a look at the documentation page CSS Classes, IDs.

The legend has class “scichart__legend” so you could have a css class to target it.

.scichart__legend {
    font-family: Arial;
    font-size: 16px;
}

Take a look at the DOM in browser inspection tools and you can find other classes and IDs that we apply to chart parts.

Best regards
Andrew

Andrew Burnett-Thompson answered 4 months ago

You must login to post comments

Thanks for your reply. I have used query selector with the css class to change the font size dynamically. However, I don’t know why but the font size is not applying to the scichart legend. Is it possible to change the legend font size dynamically?

Images

info vcanus answered 4 months ago
last edited 4 months ago

You must login to post comments

Got it,

Well if you want to dynamically change the fontSize in javascript, try this

// note for multi-charts with legends consider this may return more than one element 
const legend = document.getElementsByClassName("scichart__legend")[0];
const labels = legend.querySelectorAll("label");
labels.forEach(l => l.style.fontSize = "20px");

Slightly ugly code but it works.

Let me know in the comments what the requirement is (why you want to do this). We can improve the API if we understand more about your needs.

Thanks!

-Andrew