Styling the Charts

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.