Overview – HTML5 Color Coding in Chart

Everywhere in the library, Wherever it is required to set color, it can be mentioned in “hex Code” , “rgb values” or by writing “Color-Names”.

Color Values

HTML Colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. Some of examples are.

Color Names Hex Values Color RGB
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
White #FFFFFF rgb(255,255,255)

We can give any of hex values, Color Names, or RGB values. In the Example below we see the usage of all three format of color input.

Try it Yourself by Editing the Code below.

Adding Transparency

You can make an element Transparent by setting color in form of rgba(). “a” in rgba stands, for alpha. This feature allows us to specify an opacity value for the color.

 Eg: rgba(255, 0, 0, 0.2)

Try it Yourself by Editing the Code below.

Color Names

Color names are web-safe colors that are defined in HTML5 and CSS Color specifications. There are 16 basic Color names and 130 more. Some of them are,
“Aqua”, “Chocolate”, “Coral”, “Cyan”, “DimGrey”, “Lavender”, “Peru”, “RoyalGreen”, “SeaGreen”, “SlateGrey”
To see the list of all colors, https://www.w3schools.com/colors/colors_names.asp

Below we will set color names to set colors of various properties.

Try it Yourself by Editing the Code below.

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

Comments 10

  1. Hello
    Firstly thank you for your work, that’s amazing !
    However I’ve got a little problem. Indeed I can’t find how to change the color of a point in a Scatter.
    On my website, I’ve got a place where people can put names and color and these name must be colored on the canvas.
    However somtimes it works, sometimes only the point turn blue for example, sometimes only the span with the date.

    Thanks for your help

  2. Is there a way to dynamically set transparency? If I don’t specify a color, the canvasjs chooses colors appropriately, but there is no way of setting a transparency level for the graph. For example, it would be great to set transparency of .4 of all elements in the graph.

  3. hello, i was wondering if i can set transparency dynamically? like bubbles with larger x value will hv lower transparency.

  4. Hi, Is it possible to color just one of the grid line? for a certain value. Like in the first example can you only paint the grid line at 80 as red and others black ?

  5. Hi,

    Though I specify some colorcodes in colorSet, stacked column charts appear with white color for some dataPoints. Since the background is also white in color, those dataPoints are not visible(on hover, i could see the toolTip though). How can I avoid white color in the chart?

If you have any questions, please feel free to ask in our forums. Ask Question