American Express American Express |

Data Visualization

Purpose

The DLS provides its data visualization color palette for easy use with Highcharts, a third party library that allows us to create clear, accessible charts and graphs for our experiences. A good use of color, the right graph, and concise but descriptive labels, can help highlight the most important information. Please see below for further details.

Data Visualization Color Palette

Usage

The data visualization color palette provides colors to use when presenting information and needing to visualize data. In addition to the colors below, we have introduced a palette for use with interfaces in dark mode. Please note that these two palettes cannot be combined (no mix-and-matching colors), but must be used as discrete palettes for the respective light/dark mode that is being displayed. Only use these colors for visualizing data.


Light mode colors meet AA Accessibility guidelines (contrast ratio of 4.5:1 and above per WCAG) when placed on a background using Gray 01 or lighter. Please adhere to recommended text color to have sufficient contrast.

dls-data-aqua-400-bg
Copy Aqua 400

Aqua 400
#0E7F79
rgba (14, 127, 121, 1)
.dls-data-aqua-400
.dls-data-aqua-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-aqua-500-bg
Copy Aqua 500

Aqua 500
#07625C
rgba (7, 98, 92, 1)
.dls-data-aqua-500
.dls-data-aqua-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-aqua-600-bg
Copy Aqua 600

Aqua 600
#004842
rgba (0, 72, 66, 1)
.dls-data-aqua-600
.dls-data-aqua-600-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-bright-blue-400-bg
Copy Bright Blue 400

Bright Blue 400
#006FCF
rgba (0, 111, 207, 1)
.dls-data-bright-blue-400
.dls-data-bright-blue-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-bright-blue-500-bg
Copy Bright Blue 500

Bright Blue 500
#0056B6
rgba (0, 86, 182, 1)
.dls-data-bright-blue-500
.dls-data-bright-blue-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-bright-blue-600-bg
Copy Bright Blue 600

Bright Blue 600
#003994
rgba (0, 57, 148, 1)
.dls-data-bright-blue-600
.dls-data-bright-blue-600-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-deep-blue-400-bg
Copy Deep Blue 400

Deep Blue 400
#576FB5
rgba (87, 111, 181, 1)
.dls-data-deep-blue-400
.dls-data-deep-blue-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-deep-blue-500-bg
Copy Deep Blue 500

Deep Blue 500
#344B90
rgba (52, 75, 144, 1)
.dls-data-deep-blue-500
.dls-data-deep-blue-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-deep-blue-600-bg
Copy Deep Blue 600

Deep Blue 600
#8199DF
rgba (0, 23, 90, 1)
.dls-data-deep-blue-600
.dls-data-deep-blue-600-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-green-400-bg
Copy Green 400

Green 400
#757621
rgba (117, 118, 33, 1)
.dls-data-green-400
.dls-data-green-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-green-500-bg
Copy Green 500

Green 500
#5C5D13
rgba (92, 93, 19, 1)
.dls-data-green-500
.dls-data-green-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-green-600-bg
Copy Green 600

Green 600
#3C3D00
rgba (60, 61, 0, 1)
.dls-data-green-600
.dls-data-green-600-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-magenta-400-bg
Copy Magenta 400

Magenta 400
#C14478
rgba (193, 68, 120, 1)
.dls-data-magenta-400
.dls-data-magenta-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-magenta-500-bg
Copy Magenta 500

Magenta 500
#A22A5C
rgba (162, 42, 92, 1)
.dls-data-magenta-500
.dls-data-magenta-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-magenta-600-bg
Copy Magenta 600

Magenta 600
#760F3A
rgba (118, 15, 58, 1)
.dls-data-magenta-600
.dls-data-magenta-600-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-orange-400-bg
Copy Orange 400

Orange 400
#C54A00
rgba (197, 74, 0, 1)
.dls-data-orange-400
.dls-data-orange-400-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-orange-500-bg
Copy Orange 500

Orange 500
#A32E00
rgba (163, 46, 0, 1)
.dls-data-orange-500
.dls-data-orange-500-bg
Recommended
Text Color: Gray 01 or lighter

dls-data-orange-600-bg
Copy Orange 600

Orange 600
#8A1000
rgba (138, 16, 0, 1)
.dls-data-orange-600
.dls-data-orange-600-bg
Recommended
Text Color: Gray 01 or lighter

Highcharts

Usage

American Express has an enterprise developer license for Highcharts, an interactive SVG-based charting library. DLS Highcharts styles are available in dls-data-visualization.css within the DLS dist/styles folder that you should include in your stylesheets. Highcharts.js is available via CDN and through script-supplier.

Config Setup

When using the Highcharts API, developers should set their own global and accessibility configs. For the most visually accessible chart we recommend adding patterns to your highcharts. Refer to Highcharts lang.accessibility and chart.accessibility for configs options and our working demo for implementation examples.

Highcharts Configs

Use the following Highcharts configuration options:

Chart:
Type: {chartType}
styledMode: true
className: ‘hc-x-none’ (for bar and column charts to turn off the x-axis grid lines)

Title:
align: ‘left’
margin: 40
useHTML: true

xAxis:
labels.y: 40 (area/line/spline)
labels.x: -20 (bar/column)

yAxis:
title.text: null
labels.x: -20 (area/line/spline)
labels.y: 40 (bar/column)

Tooltip:
enable: true
padding: 12

Marker:
enabled: false
symbol: ‘circle’

Hover State:
Halo.size: 8


Example - Bar Chart - Basic

Copy
<div id="bar-color" style="width:100%; height:400px;" class="dls-data-visualization hc-bar"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
Highcharts.chart('bar-color', {
  chart: {
    styledMode: true,
    type: 'bar',
    className: 'hc-x-none'
  },
  plotOptions: {
    series: {
      borderRadius: 3,
      pointWidth: 15
    }
  },
  title: {
    text: 'Monthly Spending <span class="sr-only">in $</span>',
    align: 'left',
    useHTML: true
  },
  xAxis: {
    categories: ['NOVELPAY', 'MARKET', 'VERIZON', 'AMEX CAFE', 'COFFEE'],
    x: -20
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      y: 40,
      formatter: function () {
          return '$' + this.value;
      }
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: true,
    padding: 12,
    formatter: function() {
      return `${this.x}: $${this.y}`
    }
  },
  series: [{
    data: [700, 400, 200, 500, 100],
    colorByPoint: true
  }]
});
</script>

Example - Column Chart - Basic

Copy
<div id="column" style="width:100%; height:400px;" class="dls-data-visualization hc-column"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
Highcharts.chart('column', {
  chart: {
    styledMode: true,
    type: 'column',
    className: 'hc-x-none'
  },
  plotOptions: {
    series: {
      borderRadius: 3,
      pointWidth: 15
    }
  },
  title: {
    text: 'Yearly Spending <span class="sr-only">in $</span>',
    align: 'left',
    margin: 40,
    useHTML: true
  },
  xAxis: {
    categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
    labels: {
      y: 40
    }
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      x: -20,
      formatter: function () {
          return '$' + this.value;
      }
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: true,
    padding: 12,
    formatter: function() {
      return `${this.x}: $${this.y}`
    }
  },
  series: [{
      data: [75, 41, 19, 200, 50, 10, 20, 30, 70, 100, 88, 12]
  }]
});
</script>

Example - Stacked Column Chart

Copy
<div id="column-stacked" style="width:100%; height:400px;" class="dls-data-visualization hc-column"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
  Highcharts.chart('column-stacked', {
    chart: {
      styledMode: true,
      type: 'column',
      className: 'hc-x-none'
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      },
      series: {
        borderRadius: 3,
        pointWidth: 15
      }
    },
    title: {
      text: 'Billing Cycle',
      align: 'left',
      margin: 40,
      useHTML: true
    },
    xAxis: {
      categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
      labels: {
        y: 40
      }
    },
    yAxis: {
      title: {
        text: null
      },
      stackLabels: {
        enabled: false,
      },
      labels: {
        x: -20,
        formatter: function () {
          return `$${this.value}`;
        }
      }
    },
    legend: {
      enabled: false
    },
    tooltip: {
      enabled: true,
      padding: 12,
      formatter: function() {
        return `${this.x}: $${this.y}`
      }
    },
    series: [{
      name: 'Data 1',
      data: [75, 41, 19, 200, 50, 10, 20, 30, 70, 100, 88, 12]
    }, {
      name: 'Data 2',
      data: [25, 21, 9, 20, 5, 1, 2, 3, 7, 10, 8, 2]
    }]
  });
</script>

Example - Stacked Line Chart

Copy
<div id="line" style="width:100%; height:400px;" class="dls-data-visualization"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
  Highcharts.chart('line', {
    chart: {
      type: 'line',
      styledMode: true
    },
    title: {
      text: 'Market Trends by Month',
      align: 'left',
      margin: 40,
      useHTML: true
    },
    xAxis: {
      categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
      labels: {
        y: 40
      }
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        x: -20,
        formatter: function () {
            return '$' + this.axis.defaultLabelFormatter.call(this);
        }
      }
    },
    series: [{
      data: [75, 41, 19, 200, 50, 10, 20, 30, 70, 100, 88, 12]
      }, {
      data: [55, 31, 69, 100, 20, 90, 50, 30, 20, 10, 8, 52]
    }],
    tooltip: {
      padding: 10,
      useHTML: true,
      pointFormat: '<span>{point.y}</span>',
      valuePrefix: "$"
    },
    plotOptions: {
      line: {
        marker: {
          symbol: 'circle',
          enabled: false
        }
      },
      series : {
        states: {
          hover: {
            halo: {
              size: 8
            }
          }
        }
      }
    },
    legend: {
      enabled: false
    }
  });
</script>

Example - Spline Chart

Copy
<div id="spline" style="width:100%; height:400px;" class="dls-data-visualization"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
  Highcharts.chart('spline', {
    chart: {
      type: 'areaspline',
      styledMode: true
    },
    title: {
      text: 'Market Performance',
      align: 'left',
      margin: 40,
      useHTML: true
    },
    xAxis: {
      categories: ['1940', '1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020'],
      labels: {
        y: 40
      }
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        x: -20,
        formatter: function () {
            return '$' + this.value;
        }
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: '1',
      data: [0, 5, 42, 30, 18, 27, 11, 3, 12]
    }, {
      name: '2',
      data: [0, 0, 8, 30, 47, 22, 5, 7, 6]
    }, {
      name: '3',
      data: [0, 10, 18, 130, 47, 122, 15, 17, 16]
    }],
    tooltip: {
      padding: 12,
      useHTML: true,
      pointFormat: '<span>{point.y}</span>',
      valuePrefix: "$"
    },
    plotOptions: {
      areaspline: {
        marker: {
          enabled: false,
          symbol: 'circle'
        }
      },
      series : {
        states: {
          hover: {
            halo: {
              size: 8
            }
          }
        }
      }
    }
  });
</script>

Donut Chart

Copy
<div id="donut" style="width:100%; height:400px;" class="dls-data-visualization hc-pie"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
Highcharts.chart('donut', {
  chart: {
    styledMode: true,
    type: 'pie'
  },
  title: {
    text: 'Browser Usage',
    align: 'left',
    margin: 40,
    useHTML: true
  },
  plotOptions: {
    pie: {
      innerSize: '60%',
      dataLabels: {
        enabled: false
      },
      states: {
        hover: {
          halo: {
            size: 0
          }
        }
      },
      tooltip: {
        headerFormat: '<header>{point.key}</header><br/>',
        pointFormat: "<span> {point.y}% </span>"
      }
    }
  },
  series: [{
    data: [
      ['Firefox', 20],
      ['IE711', 5],
      ['Edge', 10],
      ['Chrome', 40],
      ['Safari', 24],
      ['Other', 1]
    ]
  }],
});
</script>

Pie Chart

Copy
<div id="pie" style="width:100%; height:400px;" class="dls-data-visualization hc-pie"></div>

<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/highcharts.js"></script>
<script src="https://www.aexp-static.com/cdaas/one/highcharts/7.2.0/modules/accessibility.js"></script>
<script>
  Highcharts.chart('pie', {
    chart: {
      styledMode: true,
      type: 'pie'
    },
    title: {
      text: 'Browser Usage',
      align: 'left',
      margin: 40,
      useHTML: true
    },
    plotOptions: {
      pie: {
        innerSize: '0%',
        dataLabels: {
          enabled: false
        },
        states: {
          hover: {
            halo: {
              size: 0
            }
          }
        },
        tooltip: {
          headerFormat: '<header>{point.key}</header><br/>',
          pointFormat: "<span> {point.y}% </span>"
        }
      }
    },
    series: [{
      data: [
        ['Firefox', 20],
        ['IE711', 5],
        ['Edge', 10],
        ['Chrome', 40],
        ['Safari', 24],
        ['Other', 1]
      ]
    }],
  });
</script>

Data Visualization Color Palette

Deprecated

Usage

The data visualization color palette provides additional colors for use in charts and other data visualizations that require higher contrast color variations than our neutrals provide. Only use these colors for visualizing data.

Data Visualization

dls-dark-yellow-bg
Copy Dark Yellow

Dark Yellow
#FDB92D
rgba(253, 185, 45, 1)
.dls-dark-yellow
.dls-dark-yellow-bg

dls-gold-bg
Copy Gold

Gold
#C1932F
rgba(193, 147, 47, 1)
.dls-gold
.dls-gold-bg

dls-salmon-bg
Copy Salmon

Salmon
#FF6D6A
rgba(225, 109, 106, 1)
.dls-salmon
.dls-salmon-bg

dls-teal-bg
Copy Teal

Teal
#35C4B5
rgba(53, 196, 181, 1)
.dls-teal
.dls-teal-bg

dls-bright-blue-bg
Copy Bright Blue

Bright Blue
#006FCF
rgba(0, 111, 207, 1)
.dls-bright-blue
.dls-bright-blue-bg

dls-bright-blue-60-bg
Copy Bright Blue 60

Bright Blue 60
#66A9E2
rgba(102, 169, 226, 1)
.dls-bright-blue-60
.dls-bright-blue-60-bg

dls-bright-blue-40-bg
Copy Bright Blue 40

Bright Blue 40
#99C5EC
rgba(153, 197, 236, 1)
.dls-bright-blue-40
.dls-bright-blue-40-bg

dls-bright-blue-20-bg
Copy Bright Blue 20

Bright Blue 20
#CCE2F5
rgba(204, 226, 245, 1)
.dls-bright-blue-20
.dls-bright-blue-20-bg

dls-deep-blue-bg
Copy Deep Blue

Deep Blue
#00175A
rgba(0, 23, 90, 1)
.dls-deep-blue
.dls-deep-blue-bg

dls-deep-blue-60-bg
Copy Deep Blue 60

Deep Blue 60
#66749C
rgba(102, 116, 156, 1)
.dls-deep-blue-60
.dls-deep-blue-60-bg

dls-deep-blue-40-bg
Copy Deep Blue 40

Deep Blue 40
#99A2BD
rgba(153, 162, 189, 1)
.dls-deep-blue-40
.dls-deep-blue-40-bg

dls-deep-blue-20-bg
Copy Deep Blue 20

Deep Blue 20
#CCD1DE
rgba(204, 209, 222, 1)
.dls-deep-blue-20
.dls-deep-blue-20-bg

Bar Charts

Deprecated

The bar charts component within the DLS has been deprecated and will be removed from future versions. If you are currently using DLS bar charts please consider upgrading to instead use Highcharts as detailed above.

Highcharts comes pre-packaged with a number of chart options, provides a more consistent look to data visualization within your application, and provides a more accessible experience for people using assistive technologies.