On this page
- Configure the default settings
- Creating Charts using the Views UI
- Create a new view
- (Optional) Enable aggregation on the view
- Add a label field
- Add data field(s)
- Configure the chart display
- Preview the view
- Save the view
- Bonus tip
- Creating Multiple Series and Combo Charts in the UI
- Use sub-charts to create dual-Y-axis charts
Steps to create charts using the views UI
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
This documentation needs work. See "Help improve this page" in the sidebar.
Configure the default settings
The charts module provides a configuration page at admin/config/content/charts, which can be used to set site-wide defaults, for example to set the default color scheme.
Creating Charts using the Views UI
Create a new view
Visit admin/structure/views/add and select the display format of "Unformatted List" or "Table" for the new page or block. AT THIS STEP, DO NOT SELECT "CHART," as that will cause a validation error because your data field has not been set.
(Optional) Enable aggregation on the view
Depending on what you want to chart, you may need to enable aggregation on the view. Under the right column of the settings, there is a section for "Use aggregation." If you need aggregated values, enable this setting.
Add a label field
When creating a view using fields, the label of the entity being queried is provided by default (e.g. "Title" (content) or "Name" (taxonomy term)). However, if you do not want the default entity label as your Charts label field, add a new "Label" field. Under the "Fields" section, add a field you would like to be used as labels along one axis of the chart (or slices of the pie). If aggregating, set the "Aggregation type" setting to "Group results together."
Add data field(s)
Now a second field which will be used to determine the data values. Usually this will be an ID field, such as NID or CID. The label you give this field will be used in the chart's legend to represent this series. After adding the
field, set the "Aggregation type" for this field to "Count". Do this again for each different quantity you would like to chart. Note that some charts (e.g. Pie) only support a single data column.
Configure the chart display

Click on the "Settings" link in the Format section to configure the chart.
Select your chart type.
Some options may not be available to all chart types and will be adjusted based on the type selected.
Preview the view
To ensure that live preview is available (that is to not encounter something like 'preview doesn't work' ...), make sure that the fix as in #2050871-1: Make the Views preview work is enabled, e.g. by using the most recent 7.x-2.x-dev version.
If that fix is not enabled, the best possible workaround for a preview of the view, is to open a saved version of the view in a different browser window. That should show the impact of your changes.
Save the view
Obvious, but just make sure to not forget to do so ...
Bonus tip
You may find it easier to start with a "Table" display and convert it to a chart display after setting up the data. It can be easier to visualize what the result of the chart will be if it's been laid out in a table first.
Creating Multiple Series and Combo Charts in the UI
When using Views to build your charts, you may find it difficult to retrieve more than a single set of data generated by a COUNT() query. For example if you wanted to retrieve the age of all your site users, but display "Male" and "Female" values in a column chart at the same time, constructing the underlying table of data is quite difficult.
To solve this problem, you can combine multiple charts on top of each other. The "parent" chart provides the global information, such as the height, width, title, and other properties. Charts that are "children" provide only data and (optionally) a secondary axis. After you've assembled the first series of data in your chart according to the instructions in the Creating Charts using the Views UI section, add a new display to the same view of the type "Chart Add-on". The "Chart Add-on" type is added the same way you would add a new Page or Block display, from the "+ Add" menu at the top of the view configuration.
After this new display has been added, find the setting for "Combine with parent chart" and change this value to point at the parent chart you have already assembled. Then adjust the settings for the child chart to pull in different data (often by overriding the filter settings). Now you can go back to your parent display, and see that the results from the child chart have been merged into the results from the parent chart. You can even use this approach to combine different types of charts, such as a line chart over the top of a column chart. Note that not all chart types can be combined together and invalid combinations may cause your chart to throw errors.
Use sub-charts to create dual-Y-axis charts
The charts module supports dual-Y-axis through the "sub-chart" feature. An image search results in plenty of usage examples of dual-Y-axis charts.
Following these steps to create such charts:
- Make a chart on the first property you would like to graph, using line, point, or column charts using Views.
- On the same view, add a new display of the type "sub-chart" (EDIT: probably merged into "Chart add on" display and 2nd setting for Y-axis?).
- On this new display, in the middle column there are two options that are important: set the "Combine with parent chart" option to the first display you configured. And then right below that option, change the "Axis settings" from "Use primary Y-axis" to "Create secondary axis".
- Change the options on this second display to make whatever differences you like. You can even combine line charts with column and point charts! You can add as many "sub-charts" as you want, but Charts module only supports 2 Y-axes.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion