Pre loader

How to change legend font size?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


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?

  • You must 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

  • You must 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?

  • You must 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 => = "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.



  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.