Using the Color Picker

amCharts 5 comes with an optional plugin - Color Picker - which does what its name says, and can even be use as a standalone element.

Loading

Color Picker plugin needs to be loaded in order for it to be used.

You can import those in your TypeScript / ES6 application as JavaScript modules:

import * as am5plugins_colorPicker from "@amcharts/amcharts5/plugins/colorPicker";

For vanilla JavaScript applications and web pages, you can use “script” version:

<script src="https://cdn.amcharts.com/lib/5/plugins/colorPicker.js"></script>

More info

For more information on installing amCharts 5 as well as loading modules refer to our “Getting started” tutorial.

Instantiating

A Color Picker is instantiated just like any other object in amCharts 5: by calling new() method of its class, passing in root element and settings object.

TypeScript

let colorPicker = root.container.children.push(
  am5plugins_colorPicker.ColorPicker.new(root, {})
);

JavaScript

var colorPicker = root.container.children.push(
  am5plugins_colorPicker.ColorPicker.new(root, {})
);

Using with button

The above code would add the color picker control directly to target container.

We can also use a smaller ColorPickerButton to invoke the color picker only when needed:

TypeScript

let colorPickerButton = root.container.children.push(
  am5plugins_colorPicker.ColorPickerButton.new(root, {
    disableOpacity: true,
    tooltip: root.systemTooltip
  })
);

let colorPicker = root.container.children.push(
  am5plugins_colorPicker.ColorPicker.new(root, {
    visible: false
  })
);

colorPickerButton.events.on("click", function() {
  colorPicker.setAll({
    colorButton: colorPickerButton
  })
});

JavaScript

var colorPickerButton = root.container.children.push(
  am5plugins_colorPicker.ColorPickerButton.new(root, {
    disableOpacity: true,
    tooltip: root.systemTooltip
  })
);

var colorPicker = root.container.children.push(
  am5plugins_colorPicker.ColorPicker.new(root, {
    visible: false
  })
);

colorPickerButton.events.on("click", function() {
  colorPicker.setAll({
    colorButton: colorPickerButton
  })
});

Events

We can use Color Picker’s colorchanged event to register any changes:

TypeScript

colorPicker.events.on("colorchanged", function() {
  console.log(colorPicker.get("color"));
});

JavaScript

colorPicker.events.on("colorchanged", function() {
  console.log(colorPicker.get("color"));
});

Example

Open in CodePen