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
- Drew Afshari asked 4 years ago
- last edited 4 years ago
- You must login to post comments
Hello Drew
SciChart uses <input type="checkbox">
with default styling.
A checkbox appearance may differ depending on the browser or platform you are using.
- Ivan Gasyuk answered 4 years ago
- last edited 4 years ago
- 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).
- 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)
- 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.
- That’s a good idea Drew, as more people use SciChart.js this kind of usability feedback is very useful. Thanks!
- You must login to post comments
Please login first to submit.