Color Palette

Custom Color Palette

Custom color palette can be used if you want to define colors that matches your design. You can create custom color palette that users can apply to the nodes, lables and links.

 
   Copy
let chart = new FlowChart('#chart', {
   colors: ['#AC193D', '#DC4FAD', '#D24726', '#FF8F32', '#82BA00', '#008A17', '#03B3B2', '#008299', '#5DB2FF', '#0072C6', '#4617B4', '#8C0095', '#004B8B', '#001940', '#570000', '#380000', '#585858' ]
});

Edit in BALKAN Code

Select one of the node and click one of menu colors at the top of the form.

Shortcuts

Also you can change the colors with shortcuts. Select a node and press any number to change the color. Here is how you can define your own shortcut:

 
   Copy
FlowChart.shortcuts.change_to_green = {
   keysPressed: ['keyg'],
   activeComponentType: 'node'
};

To execute action you can attache onShortcut event listener

 
   Copy
chart.onShortcut(function (args) {
   if (args.name == 'change_to_green') {
      for (var selectedShape of this.selectedShapes) {
         selectedShape.fill = 'green';
      }
   }
});

Edit in BALKAN Code

Select a node and press "r" key to see the effect.

Remember that color accessibility is essential. Ensure that your chosen colors meet contrast guidelines and are accessible to all users, including those with visual impairments.