Skip to content

Chart Colors

Jump to bottom
Sukanya Dasgupta edited this page Jan 30, 2020 · 3 revisions

For all charts, you can use any of the coloring techniques as mentioned below.

Color Schemes offered:

For any of the charts you can use one of the color schemes offered. I'll bring in more color schemes. Please feel free to recommend more :)

colorful [default]

'#EAC435', '#345995', '#03CEA4', '#FF6B6B', '#CA1551', '#3A3335', '#FFE19C', '#C1FFF2', '#511730', '#8789C0'

cool

'#5680E9', '#84CEEB', '#5AB9EA', '#C1C8E4', '#8860D0', '#7555E8', '#69C6EA', '#5971EA', '#AAACE2', '#C060D1'

warm

'#BA9434', '#FFE899', '#FFAC47', '#FF813D', '#E55730', '#BA9948', '#A38B3C', '#A36E2E', '#A35327', '#92381F'

How to use?

<ngx-donut-chart [width]="800"
[data]="donutChartData" colorScheme="colorful"></ngx-donut-chart>

Custom Color Schemes

You can define your own color scheme and use it instead of one of the offered ones.

How to define your custom color scheme

customColorScheme = [
  '#DFD6A7', '#D4AFCD', '#F7CE5B', '#AC9969', '#A1D2CE',
  '#78CAD2', '#62A8AC', '#5497A7', '#50858B', '#2E6171'
];

How to use your custom color scheme

<ngx-pie-chart [width]="800"
[data]="pieChartData" [customColorScheme]="customColorScheme"></ngx-pie-chart>

Set colors in your data

You can set colors within your data too. If this is done, this will take preference over any color scheme that you mention. This is how you set colors for data:

multiLineData = [
    {name: 'first', color: '#ff1111', 
      data: [
      {x: 10, y: 10, info: 'Point 1'},
      {x: 80, y: 40, info: 'Point 2'},
      {x: 30, y: 30, info: 'Point 3'},
      {x: 40, y: 20, info: 'Point 4'},
      {x: 40, y: 30, info: 'Point 5'},
      {x: 40, y: 40, info: 'Point 6'},
      {x: 50, y: 20, info: 'Point 7'},
      {x: 90, y: 20, info: 'Point 8'},
      {x: 41, y: 45, info: 'Point 9'},
      {x: 51, y: 22, info: 'Point 10'},
      {x: 92, y: 10, info: 'Point 11'}
    ]},
    {name: 'second', color: '#33bb33', 
      data: [
      {x: 10, y: 5, info:  ''},
      {x: 80, y: 30, info: ''},
      {x: 30, y: 25, info: ''},
      {x: 40, y: 35, info: ''},
      {x: 45, y: 25, info: ''},
      {x: 55, y: 35, info: ''},
      {x: 50, y: 15, info: ''},
      {x: 90, y: 15, info: ''},
      {x: 92, y: 5, info:  ''}
    ]}]

Note:

  1. The colors that you specify yourself in the data will take preference over the color scheme. So if you have set both, the colors in the data would be applied.
  2. If neither a color scheme nor any color values are specified, colorful would be chosen as the default color scheme.
Clone this wiki locally