Styling Embedded Analytics Charts and Dashboards
Watch this video to learn how to apply styles to your charts or dashboards.
You want to make sure that visualization styles match the visual style of the application or dashboard. Color palette is another important consideration. You also want to make sure that users cannot change the chart type. The code editor is where you can implement a lot of styling changes via Cascading Style Sheets (CSS). The video also covers use of the container component.
The next topic that I'm going to talk about is styling your custom charts or dashboards in your application. So, first thing that you should keep in mind is that you want to make sure that your dashboards look the part. You want to make sure that they have the right styling. If you're using rounded corners in your application, make sure you use rounded corners in your charts. Also, try to use your company's color palette when possible. And then, lastly, make sure that you hide unnecessary functionality.
A Sample Dashboard
Let me show you an example in my computer. So, what you see on the screen is a dashboard that has two visualizations, a pie chart and a bar chart. We have some options for filtering, and we also have some options for chart styles.
So, in the embedded application, we want to make sure that users are not able to change the current chart that they're looking at. So, if they have a bar chart, they shouldn't be changing it to a line chart. Also, we want to make sure that we hide the filtering capabilities at the widget level because we're gonna have a dashboard level filter.
A Dashboard Embedded In An Application
So, now we're looking at this dashboard embedded in an application. If we look at one of the widgets, interestingly, you'll find that we don't have the filter control and the chart style control. We've also added a custom time bar at the bottom.
The Code Editor
Why don't we jump right now into the code, and I'll show you how I made these changes. So, now that we've jumped into our code editor, let me show you some of the styling that I've done via CSS. The first thing that you'll notice is that I added a “display-none” rule for the filter indicator control, and I've added a similar rule for the widget change style control. So, these are the two controls that we've actually hidden in our application.
The Container Component
Once I have the CSS file I've created, I'm gonna jump over into my container component, which is the one that is actually loading my iFrame. So, here you'll see that we have some code for the iFrame, and we have an unload function that we're calling where we're actually making a reference to our CSS file.
Finally, once we've made the reference to the CSS file, we're appending it into the document that's holding our iFrame, and that makes sure that, when the iFrame runs, it also has a link to the CSS that will hide our buttons.