Html chart color palette

Intro

This page provides all the color names in the chart palettes.

Use Names – Do not use HEX values!

Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.

You cannot change the HEX values unless you create a new theme.

Qualitative Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteQualitativeHue1	#5899DA
sapUiChartPaletteQualitativeHue2	#E8743B
sapUiChartPaletteQualitativeHue3	#19A979
sapUiChartPaletteQualitativeHue4	#ED4A7B
sapUiChartPaletteQualitativeHue5	#945ECF
sapUiChartPaletteQualitativeHue6	#13A4B4
sapUiChartPaletteQualitativeHue7	#525DF4
sapUiChartPaletteQualitativeHue8	#BF399E
sapUiChartPaletteQualitativeHue9	#6C8893
sapUiChartPaletteQualitativeHue10	#EE6868
sapUiChartPaletteQualitativeHue11	#2F6497

Semantic Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteSemanticBadLight3	#f99494
sapUiChartPaletteSemanticBadLight2	#f66364
sapUiChartPaletteSemanticBadLight1	#f33334
sapUiChartPaletteSemanticBad	#dc0d0e
sapUiChartPaletteSemanticBadDark1	#b90c0d
sapUiChartPaletteSemanticBadDark2	#930a0a
sapUiChartPaletteSemanticCriticalLight3	#f8cc8c
sapUiChartPaletteSemanticCriticalLight2	#f5b04d
sapUiChartPaletteSemanticCriticalLight1	#f29b1d
sapUiChartPaletteSemanticCritical	#de890d
sapUiChartPaletteSemanticCriticalDark1	#c67a0c
sapUiChartPaletteSemanticCriticalDark2	#a4650a
sapUiChartPaletteSemanticGoodLight3	#a1dbb1
sapUiChartPaletteSemanticGoodLight2	#71c989
sapUiChartPaletteSemanticGoodLight1	#4cba6b
sapUiChartPaletteSemanticGood	#3fa45b
sapUiChartPaletteSemanticGoodDark1	#358a4d
sapUiChartPaletteSemanticGoodDark2	#2a6d3c
sapUiChartPaletteSemanticNeutralLight3	#d5dadc
sapUiChartPaletteSemanticNeutralLight2	#bac1c4
sapUiChartPaletteSemanticNeutralLight1	#9ea8ad
sapUiChartPaletteSemanticNeutral	#848f94
sapUiChartPaletteSemanticNeutralDark1	#69767c
sapUiChartPaletteSemanticNeutralDark2	#596468

Sequential Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteSequentialHue1Light3	#b2d4f5
sapUiChartPaletteSequentialHue1Light2	#93bfeb
sapUiChartPaletteSequentialHue1Light1	#74abe2
sapUiChartPaletteSequentialHue1	#5899DA
sapUiChartPaletteSequentialHue1Dark1	#367dc4
sapUiChartPaletteSequentialHue1Dark2	#1866b4
sapUiChartPaletteSequentialHue2Light3	#fcc3a7
sapUiChartPaletteSequentialHue2Light2	#f5aa85
sapUiChartPaletteSequentialHue2Light1	#ef8d5d
sapUiChartPaletteSequentialHue2	#E8743B
sapUiChartPaletteSequentialHue2Dark1	#da5a1b
sapUiChartPaletteSequentialHue2Dark2	#cc4300
sapUiChartPaletteSequentialHue3Light3	#8fd1bb
sapUiChartPaletteSequentialHue3Light2	#66c2a3
sapUiChartPaletteSequentialHue3Light1	#3fb68e
sapUiChartPaletteSequentialHue3	#19A979
sapUiChartPaletteSequentialHue3Dark1	#0e8c62
sapUiChartPaletteSequentialHue3Dark2	#03734d
sapUiChartPaletteSequentialNeutralLight3	#d5dadc
sapUiChartPaletteSequentialNeutralLight2	#bac1c4
sapUiChartPaletteSequentialNeutralLight1	#9ea8ad
sapUiChartPaletteSequentialNeutral	#848f94
sapUiChartPaletteSequentialNeutralDark1	#69767c
sapUiChartPaletteSequentialNeutralDark2	#596468

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Thank you for your helping us to improve our guidelines!

Источник

# Colors

Also, you can change the whole canvas background.

# Default colors

If a color is not specified, a global default color from Chart.defaults is used:

Name	Type	Description	Default value
backgroundColor	Color	Background color	rgba(0, 0, 0, 0.1)
borderColor	Color	Border color	rgba(0, 0, 0, 0.1)
color	Color	Font color	#666

You can reset default colors by updating these properties of Chart.defaults :

Chart.defaults.backgroundColor = '#9BD0F5'; Chart.defaults.borderColor = '#36A2EB'; Chart.defaults.color = '#000'; 

# Per-dataset color settings

If your chart has multiple datasets, using default colors would make individual datasets indistinguishable. In that case, you can set backgroundColor and borderColor for each dataset:

const data =  labels: ['A', 'B', 'C'], datasets: [  label: 'Dataset 1', data: [1, 2, 3], borderColor: '#36A2EB', backgroundColor: '#9BD0F5', >,  label: 'Dataset 2', data: [2, 3, 4], borderColor: '#FF6384', backgroundColor: '#FFB1C1', > ] >; 

However, setting colors for each dataset might require additional work that you’d rather not do. In that case, consider using the following plugins with pre-defined or generated palettes.

# Default color palette

If you don’t have any preference for colors, you can use the built-in Colors plugin. It will cycle through a palette of seven Chart.js brand colors:

All you need is to import and register the plugin:

import  Colors > from 'chart.js'; Chart.register(Colors); 

If you are using the UMD version of Chart.js, this plugin will be enabled by default. You can disable it by setting the enabled option to false :

const options =  plugins:  colors:  enabled: false > > >; 

# Dynamic datasets at runtime

By default the colors plugin only works when you initialize the chart without any colors for the border or background specified. If you want to force the colors plugin to always color your datasets, for example when using dynamic datasets at runtime you will need to set the forceOverride option to true:

const options =  plugins:  colors:  forceOverride: true > > >; 

# Advanced color palettes

(opens new window) for plugins that would give you more flexibility defining color palettes.

# Color formats

You can specify the color as a string in either of the following notations:

Источник

Intro

This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.

Palette Overview

For color names and HEX values, see palette colors – values and names.

Semantic Color Palette

Designed to communicate good, bad, critical and neutral values.

Sequential Color Palette

Designed to visualize high to low values using six shades for different measures.

Qualitative Color Palette

Designed to provide visual differentiation between data points using a specific sequence of colors.

Rules

1. Only use colors contained in the SAP Fiori chart palettes
   You should only use colors from the SAP Fiori color palettes to ensure that we maintain visual design consistency across all charts used in all SAP Fiori applications.
2. Only use one palette per chart
   Do not combine colors from different palettes in the same chart. Each palette has been carefully designed to serve a distinct purpose.
3. Ensure color names are referenced in the code – not HEX values!
   Colors are defined by names in order to support our theming capabilities. This means that the HEX values of the colors may not be exactly the same in past, present and future SAP Fiori visual design themes. This flexibility is made possible by the fact that the color names will stay the same across all past, present and future SAP Fiori visual design themes. You can get the color names and corresponding HEX values from the article on color palettes – values and names.
4. Do not use color to distinguish between forecast, actual and target values
   Use sematic patterns instead.

Default Colors

By default, every chart type comes with built-in colors that are applied automatically, based on your dataset. Here are three examples:

1. When only one series is displayed, the first color from the qualitative palette is automatically applied to each item.

Column chart: One series

2. When multiple series are displayed, more colors from the qualitative palette are automatically applied to each item in the predetermined sequence.

Column chart: Three series

3. Colors from the sequential palette are automatically applied to the heatmap.

Default colors in a heatmap

Changing the Colors

There are three ways to change the colors in charts:

By Category Item

In the example below, one category has been highlighted using the second color from the qualitative palette.

Column chart with a highlighted category

By Series

In the example below, the series use different shade of the same color because one series must be more visible than the other.

Two series column chart

Based on Value

In the example below, the data points are red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart with encoded values

• You can customize chart colors using the property: plotArea.dataPointStyle.
• When you customize the colors, you must define colors for all your data points.
• If no color has been assigned to a particular data point, the chart component automatically assigns the color black to indicate that no color has been assigned.
• If for some reason multiple colors are assigned to the same data point, the last assigned color will be applied.
• You must manually define the labels that are associated with the colors in the legend as the chart components cannot automatically do this.

Qualitative Palette

The colors in the qualitative palette do not carry semantic meaning. The palette has been designed to provide visual differentiation between data points by virtue of the fact that each color is visually distinct.

Therefore, we recommend using the colors in the sequence illustrated above as opposed to using any colors simply because you prefer them.

For edge cases where you have more than 11 categories, an additional 11 colors were added. These are darker versions of the same colors.

Qualitative palette

Qualitative palette — additional colors

For color names and HEX values, see palette colors – values and names.

Источник