Creating Charts and Graphs with Adobe Illustrator CS6
This manual will go through the steps for creating charts and graphs using various techniques, as well as
how to customize the look of these graphics.
Note: Please see the ModComp manual for notes on how to add graphs and charts to a larger
infographic using the templates at the School of Journalism.
PART 1: Getting Started
1. Open Adobe Illustrator CS6. From the top menu, choose File-New to create a new AI file.
2. In the window that pops up, give the file a name and choose the “Web” profile. You will also want
to set the dimensions of the file. If the chart will be placed into the MODCOMP infographic
template, set the size to 550px by 550px. If it’s for video, set the size to 1920px by 1080 px.
Otherwise, determine what the size needs to be before you begin if at all possible. Now, the profile
will read “custom” like in the example below, since the dimensions have changed.
3. Click OK and a new artboard will appear.
PART 2: Choose graph type and enter data
Note: Keep in mind the following when choosing a graph type:
•
Small sets of numerical values that relate to each
other work well in bar graphs.
•
Percentages lend themselves well to pie charts
•
Line graphs are effective for tracking change
•
Scatter graphs are used to show how two sets of data
effect one or more categories
1. Press J to select the Column Graph Tool. Click and hold down the
Column Graph Tool button on the Tools Panel in order to see all
the nested options:
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 1
Here are examples of the same data set visualized in the various chart options:
2. Once you have selected a graph tool, click anywhere on the canvas and a small window will pop up.
Set the size of the graph (for MODCOMP, start with 500px by 500px) and click OK.
3. The data entry window will open.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 2
4. To add data, you have two choices: input manually by typing in the grey boxes, or import a data set
from a file by clicking the “Import Data” button and browsing to the file. For small data sets, it is
simpler to input the information manually.
5. When inputting manually, You can also label and create a legend for the graph inside the graph
window by placing the labels within the grid like so (the quotations are only required for number
label):
6. As you add values, click the checkmark at the top right of the window and it will appear in the
graph. Select an empty cell in the grid to add the next value.
7. Scatter graphs act very differently from the rest of the options, since they are a way to plot two sets
of information as they relate to two or more categories (note in the example above, the data did
not generate a true scatter graph). To input this information into the grid, follow the example
below:
8. If you input data and it is not appearing the way you expect, you have a few choices: re-type the
data until it is correct, try the “Transpose Row/Column” button, or try the “Switch X/Y” button.
When using the buttons, simply click a second time to revert back to the previous layout.
9. The data window will stay open until you close it. If you close the window and need to return to
it, choose the selection tool (V), right click on the graph itself and choose “data” from the list.
The window will pop open again.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 3
PART 3: Customization – using selection tools with Graphs
Understanding the difference between the Selection Tool and the Direct Selection Tool is the first step in
customizing graphs.
1. The Selection Tool (hotkey “V”) will select the entire graph and all its components.
a. Select the graph, then click and drag to move the entire graph to a new location on the
art board.
b. Right-click to find the transform options, including scale and rotation. (note the graph
window must be closed before making transformations)
c. Also by right-clicking, you can change the type of graph or re-open the data window.
d. De-select the graph by clicking elsewhere on the art board before moving on.
2. The Direct Selection Tool (hotkey “A”) selects each portion of the graph individually (a bar in a bar
graph, a slice in a pie chart, a point or line segment on a line graph, etc…) .
a. To select several portions of the graph, click and drag around the parts you wish to
select. Or, hold down shift while clicking on the various portions.
b. To change the colour of a portion of the graph (bar, line, etc…) start by selecting it with
the Direct Selection Tool, then change the colour of the stroke or fill in the properties
bar at the top of the screen:
Note that you can also choose no stroke or fill (denoted by a white box with a red
diagonal line through it). You can also change the style of the stoke and the overall
opacity of the object.
c. To transform a selection (either the entire graph or portions of it, depending on the tool
you are using), Right-click and choose “Transform.” From here, you can shrink, enlarge,
rotate, etc…But, warning! Transformations can easily misrepresent the data in a graph,
so use carefully.
PART 4: Customization – Graph Type Window
To get to the Graph type window, use the selection tool to select the graph, then right-click on the graph
and choose “Type.”
At the top of the window is a pull-down menu with several options. Here are some of the changes you
can make using these options.
“Graph Options”
 Change graph type entirely without having to add the data again.
 Add a drop shadow, add a legend, and adjust the lines, columns or bars within the graph.
“Value Axis” (not available for pie charts)
 Set the scale of a graph using the “Override Calculated Values” option. So, if you have values
that are percentages, you can set the max value to 100.
 Adjust the length and number of tick marks for the value axis.
 Add a prefix or suffix to the values, (a dollar sign, percentage sign, etc..)
“Category Axis” (not available for pie charts – scatter graph has “Bottom Axis” options)
 Adjust the length and number of tick marks for the category axis.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 4
PART 5: Customization – using effects
Using either the selection tool or the direct selection tool, select the graph or portion of the graph you
wish to effect. Below are some of the options.
“Stylize”
 Add a soft drop shadow, feather, outer or inner glow
“Photoshop Effects”
 These are most of the Photoshop effect options, including artistic effects, blur, and textures.
“3D”
 Using “extrude and emboss” you can create a 3D graph. Below is an example using a pie chart.
First, the 3D effect is applied to all the slices of the pie (selected with Direct Selection Tool,
holding down the Shift key). Then, a slice of the pie was selected using the Direct Selection Tool,
and moved out from the graph.
Note that once the 3D effect has been added to the graph, you can select the bevel (black
portion in this example) using the Direct Selection tool and the colour can be changed.
PART 6: Customization – Using Chart Designs to add symbols to bar graphs
Instead of bars, images can be used within bar graphs to further illustrate the data. This is a multi-step
process, but the end result is very effective in some cases.
1. Determine the image you wish to use…you can find several symbols within Illustrator. Choose
Window-Symbols from the top menu to open the Symbols panel. Then, click on the library button
at the bottom to browse the available symbols.
Click and drag the symbol you wish to use to the art board temporarily.
2. Alternatively, you can import or draw your own design onto the art board.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 5
3. Once you have the art you wish to use in the design on the artboard, select it using the Selection
Tool, then choose Object-Graph-Design from the top menu.
4. In the window that pops up, click on the button “New Design.” This will add your design to the
list. You can then click the button “Rename” to label the design for future reference. Click OK.
5. Next, use the Direct Selection Tool while holding the Shift key to select all columns/bars and
legend components for the set of values you wish to apply the design to.
6. Choose Object-Graph-Column. A window will pop up with several options.
7. First, select the design from the list on the left. Then, determine how you want the design to
appear – Vertically Scaled (stretching), Uniformly scaled (proportionally scaled), Repeating (if
this is chosen, please read step 7), or Sliding (places one symbol at the top point of the column).
8. With “Repeating,” ensure you have set a value in the box beside “Each Design Represents.” Also,
decide what you would like to have happen for fractions – either chop or scale the design.
9. Click OK and see the result. To make changes, use CTRL-Z to undo and repeat the steps above.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 6
PART 7: Save the Graph
At this point, there are two options – save the file to import into Photoshop or Illustrator to add to a
bigger project, or export the graph to use on its own.
For Photoshop and Illustrator:
 Choose File-Save As from the top menu. Navigate to where you wish to save the file (ex –
inside a project folder), give the file a name and click “SAVE”
 In the window that pops up, leave the options as-is and click “OK”
 In Photoshop or Illustrator, use the placing options available for these programs to import
the Illustrator file. Note that the white art board in Illustrator is not part of the file, so the
background will be transparent.
Straight to the Web:
 Choose File-Export from the top menu. Navigate to where you wish to save the file (ex –
inside a project folder), give the file a name and choose PNG as the file type. Click OK.
 In the window that pops up, choose Screen (72ppi) resolution, Type Optimized (Hinted)
anti-aliasing, and a background colour (transparent, black, white, or custom). Click OK.

Add the image to your webpage using the options available for your site.
Creating Charts and Graphs with Adobe Illustrator | Ryerson School of Journalism | January 2013 |Page | 7