Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set your subtitle preferences in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please refer to our video player troubleshooting guide for assistance.

Styling the Charts

Darren Jones
Data Visualization Interfaces in Python With Dash Darren Jones 03:34
Recommended Tutorial Course Slides (.pdf) Sample Code (.zip) Ask a Question

00:00 Styling the charts. In the previous section of the course, you saw how to use CSS styles to improve the appearance of elements of the dashboard. In this video, you’ll see how to improve the appearance of charts in Dash using a combination of Dash parameters and CSS. Let’s get started by making changes to the price chart.

00:26 In this code, you define a className and a few customizations for the config and figure parameters of your chart. You remove the floating bar that Plotly shows by default.

00:59 You set the hover template so that when the user hovers over a data point, it shows the price in dollars. Instead of just 2.5, it will show as $2.5. You adjust the axis, the color of the figure, and the title format in the layout section of the graph.

01:32 You wrap the graph in an html.Div with a "card" class. This will give the graph a white background and add a small shadow below it.

01:41 There are similar adjustments to the sales volume chart, as seen onscreen.

02:25 In addition to the code you’ve just seen, you’ll also need to add the new classes to style.css as seen onscreen.

03:02 Once again, run the app using the code seen onscreen and navigate to the URL with your browser. You should be rewarded with a much better looking dashboard, as seen onscreen.

03:17 While this is a great improvement in the default appearance, there’s an important element missing from the application: interactivity. In the next sections of the course, you’ll learn how to add interactive components to your dashboard for a much better user experience.

Become a Member to join the conversation.