Component overview
Chart components use a .csv file to generate accessible pie charts, line charts, column charts and bar charts.
- Used to display data. Chart components can be used to display data in one of four formats to help users visualize information.
- Chart generates downloadable data and a table. The Chart component will allow users to download your data in various formats and also includes a data table to present your chart in an accessible format.
- Charts use .csv files. Your data will need to be in a .csv format. Upload it the appropriate folder under Charts in the Documents folder of the asset manager.
- Charts require a title. There is also an optional subtitle field.
- Consider the complexity of your data. Chart components are responsive, but as screen sizes get smaller, charts with lots of data points become harder for users to read. Consider other formats for presenting complex data.
- Charts must be placed in Chart Panels. Chart Panels allow you to place a blue or dark gray background behind your chart. They also include an option Panel heading and Panel description area.
- Charts offer a variety of data display options. You can add titles to your X and Y axis, adjust the axis intervals, and adjust label alignment and rotation.
- Pie Chart Options: Pie Charts allow you to input a "Pre Selected Record," which a selects column in your .csv to display broken out from the rest of your pie chart. Enter the corresponding column number in this field. Pie Charts also allow you to customize the Data Label Format. The pre-populated text can also be used to add/remove $, % or number of decimal places from your data labels.
- Charts are accessible. The Chart component is the most accessible way to display data in a visual format. You should use the Chart component for all charts on your site.
- Copy below the Chart is pre-populated. Pre-populated text reading "Hover over chart for more information or select "View data table" in the chart menu for tabular format" is included in Charts and should not be removed.
For Charts: CHART: UNIT NAME - Purpose.
- Example: CHART: HOUSING - Resident Demographics
For Chart Panels: CHARTPANEL: UNIT NAME - Purpose.
- Example: CHARTPANEL: - HOUSING - Resident Demographics
Example Chart components
This is a Chart Panel heading.
This is a Chart Panel description. Headings and descriptions can be center, left or right aligned. You can also use the Data Label Format option in the Chart component to format your Pie Chart labels. In this example, the Pre Selected Record is set to 2.
Line chart with gray background.
The Chart Panel heading and description are left aligned in this example. In this example, the X-Axis Label Rotation field has been set to -30 to provide a slight tilt to the X-Axis labels.
Bar chart with gray background.
Column chart with blue background.
The Chart Panel heading and description are right aligned in this example. The description area has been set to small. Column charts can be set to normal display or stacked.
Have questions? Need website assistance?
Email us at: cms@unr.edu