<h2>When to use</h2>
<p>Visual representations of data can make it easier to spot trends, patterns, and anomalies that might be missed in raw data when:</p>
<ul>
<li>monitoring KPIs.</li>
<li>comparing performance over time.</li>
<li>testing hypotheses.</li>
<li>tracking progress towards goals.</li>
<li>spotting early warning signs.</li>
<li>identifying areas for improvement.</li>
</ul>
<h2>Anatomy</h2>
<p>Data visualization dashboard</p>
<details data-name='image-block' data-images='[{"alt":"Example of a data visualization dashboard showing the six parts of its anatomy.","caption":"","url":"https://dds.dell.com/site/data-visualization/dashboard-template/vas-template.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<p>Dashboards contain these six elements:</p>
<ol>
<li>Masthead</li>
<li>Side navigation</li>
<li>Footer</li>
<li>Page header</li>
<li>Section title and actions</li>
<li>Content area</li>
</ol>
<h2>Use</h2>
<p>Dashboards are a data visualization tool for showing data in a clear and concise way. They allow you to monitor, analyze, and report on performance through the use of data visualization components. </p>
<h3>Use cases for dashboards</h3>
<ul>
<li><strong>Tracking performance</strong>: Monitor daily performance for individuals, teams, regions, or products.  </li>
<li><strong>System health</strong>: IT can use dashboards to monitor server uptime, CPU usage, and application availability in real time. </li>
<li><strong>Customer support metrics</strong>: Support teams benefit from dashboards that show ticket volume, resolution time, and customer satisfaction scores.</li>
<li><strong>Production or supply chain monitoring</strong>: On the factory floor, dashboards display production line performance, defect rates, and equipment status. </li>
<li><strong>Marketing campaign performance</strong>: Marketing teams use dashboards to track real-time performance metrics like click-through rates, conversions, and ad spend across channels.</li>
<li><strong>Monitoring website analytics</strong>: Keep an eye on website traffic, bounce rates, and conversion metrics.</li>
</ul>
<h2>Tips for creating a dashboard</h2>
<p><strong>1. Define your audience and use case.</strong> </p>
<ul>
<li>Who will use it? </li>
<li>What are their roles, goals, and data literacy levels? </li>
<li>What use case will your data support? </li>
<li>Choose charts and metrics that relate to use case and audience needs.</li>
</ul>
<ol start="2">
<li><strong>Identify key metrics and accurate data sources.</strong></li>
</ol>
<ul>
<li>Focus on metrics that drive action or reveal insights.</li>
<li>Make sure your data is accurate, timely, and relevant.</li>
<li>When possible, automate updates to keep dashboards current.</li>
</ul>
<p><strong>2. Choose the correct components for your use case.</strong></p>
<ul>
<li><a href="/data-visualization/metrics-card">Metrics card</a>: Show single key metrics at a glance.</li>
<li><a href="/data-visualization/bar-chart">Bar chart</a>: Compare categories.</li>
<li><a href="/data-visualization/line-chart">Line chart</a>: Show trends over time.</li>
<li><a href="/data-visualization/pie-chart">Pie chart</a><a href="/data-visualization/donut-chart"></a>: Show proportions (use sparingly).</li>
<li><a href="/data-visualization/donut-chart">Donut chart</a>: Show proportions and a total value.</li>
<li><a href="/data-visualization/area-chart">Area chart</a>: Show trends over time, volume of data, and how individual categories contribute to a whole. </li>
<li><a href="/components/table">Table</a>: Supports accessibility and offers more detailed data.</li>
</ul>
<p><strong>3. Design for clarity and usability.</strong></p>
<ul>
<li>Group related visuals. </li>
<li>Prioritize top left for key insights.</li>
<li>Use consistent, purposeful color schemes.</li>
<li>Keep it simple. Less is more.</li>
<li>Use labels, legends, and tooltips to explain data and add context.</li>
</ul>
<p><strong>4. Test and iterate.</strong></p>
<ul>
<li>Gather feedback: Ask users if the dashboard meets their needs.</li>
<li>Refine: Adjust based on usability, performance, and clarity.</li>
</ul>
<h2>Layout</h2>
<p>You can customize the layout to fit your use case, showing multiple metrics at a glance, or showing related data for more specific analysis. </p>
<p>Arrange the data visualization components on your dashboard in a way that tells the best story for your use case. For example, when tracking product sales, you may want to use metrics cards that show the current data for individual products. Then, you can follow those with charts that compare each product category side-by-side (Bar chart), over time (Line chart), or as contributors to overall sales (Donut chart).</p>
<p>Focus on the most important data by omitting unnecessary features or visual clutter. This will keep your dashboard design simple and intuitive.</p>
<p>For more information on using the Figma UI Kit dashboard template view the <a href="/resources/videos">Dashboard Template Tutorial</a>.</p>
<h3>Tabs</h3>
<p>Using <a href="/components/tabs">tabs</a> may help to organize complex dashboards into more logical groupings, enabling a better user experience by providing multiple simple, well-organized views.</p>
<p>It’s important to maintain the goal and context of your dashboard when allowing users to switch between different views. </p>
<h2>Reports and table view pattern</h2>
<p>A report is a static collection of data and analysis that often encompasses multiple pages. For instance, you could have a report on yearly sales that includes data on each product you sell, where sales occur, sales teams and individual salespeople, sales KPIs, sales goals, etc. </p>
<p>The <a href="/patterns/table-view">table view</a> pattern allowsdashboard components to be viewed as tables or downloaded as .CSV files, making it easy to use data from your dashboard for creating reports. To enable these features for your dashboard, you’ll want to implement the Table view pattern for each component for which it is available.</p>
<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Medium website","path":"https://medium.com/@mokkup/8-essential-dashboard-design-principles-for-effective-data-visualization-40653c5fd135","type":"External"},"title":"8 Essential Dashboard Design Principles for Effective Data Visualization","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit Geckoboard site","path":"https://www.geckoboard.com/best-practice/dashboard-design/","type":"External"},"title":"Design and Build a Great Dashboard","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit elvatr Website","path":"https://elvtr.com/blog/how-to-design-and-build-a-great-dashboard","type":"External"},"title":"How to Design and Build a Great Dashboard","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


Dashboards use data visualizations to present complex data in a clear and concise format.

Dashboard Template

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
