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-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 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

Key points

Use this option to highlight a few key points next to a chart or datapoint. This option works well if there are points or implications that might not be obvious from the chart itself and need to be called out. You can also use this area to cite related data from other sources.

/blk-corp-assets/documents/charts/line-graphs-chart.csv area-chart area-chart Y-axis label true
This is an example of a 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.

Growth of the strategy

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance. Text Style

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Rules and recommendations

Area graph key points rules
Component element Optional element Rules
A: Background
  • BLK_White with optional top/bottom border
  • BLK_Black
  • BLK_Neutral 1
    B: Chart title
    • Character count: ~70*
    • This should be a short description of what the data in the chart represents
    C: Toggle View
    • Switches between chart and table views
    • Automatically generated in the backend
    D: 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)
    E: Key points subheadline
    • Character count: ~70*
    F: Key points description
    • Character count per bullet: ~200*
    • Hyperlink capability available
    • Max 4 bullets
    G: CTA
    • CTA can be either a primary button or a tertiary link
    • Keep these "digital" friendly; i.e. short descriptors
    H: Chart
    • Chart alignment: left or right
    • 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)
    I: 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 area-chart area-chart Y-axis label false
    This is an example of a 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.

    Growth of the strategy

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    /blk-corp-assets/documents/charts/line-graphs-chart.csv area-chart area-chart Y-axis label false
    This is an example of a 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.

    Growth of the strategy

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Key point subheadline

    Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

    Description

    Use this option when you’d like to provide additional information about the data displayed. You can use the text next to it to provide context to the data, highlight additional points, or link out to additional content.

    /blk-corp-assets/documents/charts/line-graphs-chart.csv area-chart area-chart Y-axis label true
    This is an example of a 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.

    Money is the main cause of stress in the UK

    Every year, we ask people from all over the world, including UK, how they think and feel about their financial health. This year, we went deeper than ever to understand the connection between your wealth and well-being. And why you feel the way you do.

     

    Nearly half of those surveyed said that money is a major cause of stress. The figure increases to two-thirds among those without savings or investments. Respondents with savings are less likely to be stressed about money...

     

    …and respondents with investments are even less likely to be stressed.

    Rules and recommendations

    Area description rules
    Component element Optional element Rules
    A: Background
    • BLK_White with optional top/bottom border
    • BLK_Black
    • BLK_Neutral 1
      B: Chart title
      • Character count: ~70*
      • This should be a short description of what the data in the chart represents
      C: Toggle View
      • Switches between chart and table views
      • Automatically generated in the backend
      D: 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)
      E: Blurb description
      • Character count per bullet: ~750*
      • Hyperlink capability available
      F: CTA
      • CTA can be either a primary button or a tertiary link
      • Keep these "digital" friendly; i.e. short descriptors
      G: Chart
      • Chart alignment: left or right
      • 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)
      H: 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 Chart components together to give you a more clear understanding of how this could look.

      /blk-corp-assets/documents/charts/line-graphs-chart.csv area-chart area-chart Y-axis label true
      This is an example of a 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.

      Money is the main cause of stress in the UK

      Every year, we ask people from all over the world, including UK, how they think and feel about their financial health. This year, we went deeper than ever to understand the connection between your wealth and well-being. And why you feel the way you do.

       

      Nearly half of those surveyed said that money is a major cause of stress. The figure increases to two-thirds among those without savings or investments. Respondents with savings are less likely to be stressed about money...

       

      …and respondents with investments are even less likely to be stressed.

      /blk-corp-assets/documents/charts/line-graphs-chart.csv area-chart area-chart Y-axis label true
      This is an example of a 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.

      Money is the main cause of stress in the UK

      Every year, we ask people from all over the world, including UK, how they think and feel about their financial health. This year, we went deeper than ever to understand the connection between your wealth and well-being. And why you feel the way you do.

       

      Nearly half of those surveyed said that money is a major cause of stress. The figure increases to two-thirds among those without savings or investments. Respondents with savings are less likely to be stressed about money...

       

      …and respondents with investments are even less likely to be stressed.