SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
0
0

I was looking over Tutorial 07 – Tooltips and Legends and the Chart Legends API demo, and noticed that the checkboxes and legend font had some styling applied. But, when I implement a legend on my own it uses the default font (or whatever global font style I used) and the default HTML checkbox styling. I was wondering if you had modified the styling using an outside CSS file, if there is an API endpoint for modifying the styling of the legend, or if this is possibly a bug. I did see that there was an applyTheme() method available, but I thought that it might not apply to this situation. I also tried to look through the example code provided for the Chart API Demo, but I couldn’t find anything that pointed one way or the other.

I have attached screenshots of what the legend looks like in the two examples, as well as a screenshot of what the legend looks like when I implement it on my own. I have also included a zip file with the demo application I created.

Thanks,
Drew

Version
1.2.1452
Attachments
scichart-legend-styling.zip
Images
JavaScript Legend   Styling
Share
  • You must to post comments
Filter
Sort by: Most Votes
Best Answer
0
0

Hello Drew
SciChart uses <input type="checkbox"> with default styling.
A checkbox appearance may differ depending on the browser or platform you are using.

  • Drew Afshari
    I didn’t realize that the default Chrome checkbox styling would be different than the default Electron checkbox styling. I am fine editing my global styling, but I am worried about running into issues with messing with the text part of the legend since I am using bootstrap/material in my main application. I added an image to the original post to show what it looks like there (I don’t think there is any way to add images to comments).
  • Ivan Gasyuk
    If you have difficulties in styling the legend, we’ll need a bit more details to be able to reproduce these issues and help you. (e.g. what are you trying to achieve and which styles are you trying to apply)
  • Drew Afshari
    Luckily I was able to achieve the styling I wanted using global CSS elements (see the latest image added). If you are to look into this further in the future the only thing I think I would really like is for chart HTML elements to have their own class names (i.e. input type=”checkbox” classname=”scichart-legend-check” … \>) so I can override chart styling without needing to worry about possibly messing with element styling for the rest of my application.
  • Andrew Burnett-Thompson
    That’s a good idea Drew, as more people use SciChart.js this kind of usability feedback is very useful. Thanks!
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.