How to define your own color set for a ReactJS canvas component?

[ttchuah]

I am using the ReactJS canvasJS components.

How do I define a custom color set?

This link shows me how to do it in vanilla JS, but I’m looking for a ReactJS method.
https://canvasjs.com/docs/charts/chart-options/colorset/

Thanks.

[Vishwas R]

@ttchuah,

Defining custom color-set array using addColorSet method works fine in Vanilla JS, React, Angular, etc. Please take a look at this sample project.

—
Vishwas R
Team CanvasJS

[khanhle]

The solution works great!

[sameer89]

Hey, could you provide some guidance on how to achieve this in Angular?

[Vishwas R]

@sameer89,

You can import CanvasJS from angular-charts package to add custom colorset as shown in the code-snippet below.

import { CanvasJS } from '@canvasjs/angular-charts';
CanvasJS.addColorSet('customColorSet', ['#4661EE', '#EC5657', '#1BCDD1', '#8FAABB', '#B08BEB', '#3EA0DD', '#F5A52A', '#23BFAA', '#FAA586', '#EB8CC6']);

Please take a look at this Stackblitz for an example of the same.

—
Vishwas R
Team CanvasJS