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?
- info vcanus asked 4 months ago
- You must login to post comments
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?
- 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
- Andrew Burnett-Thompson answered 4 months ago
- You must login to post comments
Please login first to submit.
