Line graphs

Line graphs express change over short - and long time periods, such as stock price performance.

Where small changes exist in a dataset, line graphs emphasize exact values, so are better to use than bar charts.

Line graphs can also be used to compare change over time for more than one group, giving you multiple lines on one graph. Remember, all lines should express a response to the same question.

 

Publishing? View the DCR guidebook for detailed instructions.

Paragraph appearance Key points appearance Description appearance
Paragraph-2,Charts-1,Charts-2,Paragraph-3,Advance Static Table-1,Paragraph-4,Charts-3,Charts-4
Paragraph-5,Charts-5,Paragraph-6,Advance Static Table-2,Paragraph-7,Charts-6,Charts-7
Paragraph-8,Charts-8,Paragraph-9,Advance Static Table-3,Paragraph-10,Charts-9,Charts-10

Paragraph width line graph

This appearance is best used for insights pages / detailed educational pages where you need to pull in supporting data in-line to the subject matter.

/blk-corp-assets/documents/charts/line-graphs-chart.csv line-chart Data line-chart Y-axis label false
Optional chart title
Chart
Line chart with 3 lines.
The chart has 1 X axis displaying Data.
The chart has 1 Y axis displaying Y-axis label. Range: 0 to 300.
End of interactive chart.
Chart
DataLabel 1Label 2Label 3
Jan709058
857568
758288
958898
Feb989298
889896
98102106
105125101
Mar115127115
120135120
125130126
135142130
Apr148148136
145152140
138160150
148162138
May155169145
160175156
175189169
185192189
Jun199205198
215215201
225235210
205230218
Jul224235226
228240228
235235230
248238234
Aug258240236

Allocations subject to change.

Negative weightings may result from specific circumstances (including timing differences between trade and settle dates of securities purchased by the funds) and/or the use of certain financial instruments, including derivatives, which may be used to gain or reduce market exposure and/or risk management.

Test

  Testing this example

/blk-corp-assets/documents/charts/line-graphs-chart.csv line-chart line-chart Y-axis label false

Full width line graph

This appearance is best used for insights pages / detailed educational pages where you need to pull in supporting data in-line to the subject matter.

This is an example of a chart title
Chart
Line chart with 3 lines.
The chart has 1 X axis displaying categories.
The chart has 1 Y axis displaying Y-axis label. Range: 25 to 275.
End of interactive chart.
Chart
CategoryLabel 1Label 2Label 3
Jan709058
857568
758288
958898
Feb989298
889896
98102106
105125101
Mar115127115
120135120
125130126
135142130
Apr148148136
145152140
138160150
148162138
May155169145
160175156
175189169
185192189
Jun199205198
215215201
225235210
205230218
Jul224235226
228240228
235235230
248238234
Aug258240236

Rules and recommendations

Line graph rules
Component element Optional element Rules
A: Background
  • • Paragraph width only
    •     - BLK_White with optional top/bottom border
  • • Full width only
    •     - BLK_Black
    •     - BLK_Neutral 1
B: Main headline/Intro
  • • Headline character count: ~70*
  • • Large (40px Extrabold) = H2 — or — Medium (32px Bold) = H3 headline size option
    •      - PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page. If this is used as support for an established section, use the “medium” size headline.
  • • Intro blurb character count: ~350*
  • • Can have the headline without the intro blurb (or vice-versa)
C: Chart title
  • • Character count: ~70*
  • • This should be a short description of what the data in the chart represents
D: Toggle View
  • • Switches between chart and table views
  • • Automatically generated in the backend
E: Chart
  • • Fully responsive
  • • Colors are assigned automatically as per brand guidelines
  • • Dynamically generated via CSV file upload
  • • Please refer to our technical documentation for more detailed requirements for the CSV data file (internal access only)
F: Source/Caption
  • • No character limit
  • • Two appearance options: Fully visible caption, or blind that expands on-click
  • • Option for 16px default body size or 12px font size, depending on regional legal requirement
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

Alternate variations

All of our components have the ability to stack vertically as many times as your needs require, and include different background appearances. To help you visualize possible layouts, we stacked a few Image components together to give you a more clear understanding of how this could look.

/blk-corp-assets/documents/charts/line-graphs-chart.csv line-chart Data line-chart Y-axis label false

Resilient assets in an environment of uncertainty max out at seventy

The coronavirus outbreak is set to deliver a sharp and deep economic shock. Market moves are reminiscent of the 2008 crisis, but we don’t think this is a repeat. String some containment and social distancing policies will bring economic activity to a near standstill, but provided aggressive fiscal and monetary policy actions are taken for business.

Optional chart title
Chart
Line chart with 3 lines.
The chart has 1 X axis displaying Data.
The chart has 1 Y axis displaying Y-axis label. Range: 0 to 300.
End of interactive chart.
Chart
DataLabel 1Label 2Label 3
Jan709058
857568
758288
958898
Feb989298
889896
98102106
105125101
Mar115127115
120135120
125130126
135142130
Apr148148136
145152140
138160150
148162138
May155169145
160175156
175189169
185192189
Jun199205198
215215201
225235210
205230218
Jul224235226
228240228
235235230
248238234
Aug258240236

Allocations subject to change.

Negative weightings may result from specific circumstances (including timing differences between trade and settle dates of securities purchased by the funds) and/or the use of certain financial instruments, including derivatives, which may be used to gain or reduce market exposure and/or risk management.

/blk-corp-assets/documents/charts/line-graphs-chart.csv line-chart Data line-chart Y-axis label false

Resilient assets in an environment of uncertainty max out at seventy

The coronavirus outbreak is set to deliver a sharp and deep economic shock. Market moves are reminiscent of the 2008 crisis, but we don’t think this is a repeat. String some containment and social distancing policies will bring economic activity to a near standstill, but provided aggressive fiscal and monetary policy actions are taken for business.

Optional chart title
Chart
Line chart with 3 lines.
The chart has 1 X axis displaying Data.
The chart has 1 Y axis displaying Y-axis label. Range: 0 to 300.
End of interactive chart.
Chart
DataLabel 1Label 2Label 3
Jan709058
857568
758288
958898
Feb989298
889896
98102106
105125101
Mar115127115
120135120
125130126
135142130
Apr148148136
145152140
138160150
148162138
May155169145
160175156
175189169
185192189
Jun199205198
215215201
225235210
205230218
Jul224235226
228240228
235235230
248238234
Aug258240236

Allocations subject to change.

Negative weightings may result from specific circumstances (including timing differences between trade and settle dates of securities purchased by the funds) and/or the use of certain financial instruments, including derivatives, which may be used to gain or reduce market exposure and/or risk management.