Area charts

Area charts show change over time for one or more related categories. They usually communicate a general trend rather than exact values.

Area charts are similar to line graphs, but show the area between the horizontal axis and the line as a solid color, lending greater emphasis.

 

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,Paragraph-5,Advance Static Table-2,Paragraph-6,Charts-4,Charts-5
Paragraph-7,Charts-6,Paragraph-8,Advance Static Table-3,Paragraph-9,Charts-7,Charts-8

Paragraph width area chart

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 area-chart Data area-chart Y-axis label true
Optional chart title

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 area-chart area-chart Y-axis label true

Full width area chart

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

Rules and recommendations

Area graph rules
Component elementOptional elementRules
Component elementA: Background Optional element Rules
  • • Paragraph width only
    •     - BLK_White with optional top/bottom border
  • • Full width only
    •     - BLK_Black
    •     - BLK_Neutral 1
Component elementB: Main headline/Intro Optional element Rules
  • • 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)
Component elementC: Chart title Optional element Rules
  • • Character count: ~70*
  • • This should be a short description of what the data in the chart represents
Component elementD: Toggle View Optional element Rules
  • • Switches between chart and table views
  • • Automatically generated in the backend
Component elementE: Chart Optional element Rules
  • • 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)
Component elementF: Source/Caption Optional element Rules
  • • 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
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release Optional element Rules
Showing 1 to 7 of 7 entries