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”.
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.
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)
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.
Also See:
10 Comments
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
If you can replicate the issue in a jsfiddle, I would be able to figure out the problem. Please fork this template jsfiddle for the same. https://jsfiddle.net/canvasjs/QwZuf/
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.
hello, i was wondering if i can set transparency dynamically? like bubbles with larger x value will hv lower transparency.
saraxia33,
As of now opacity can be set only at the dataSeries level and not for the individual dataPoints.
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 ?
kenny,
You can consider using stripLines instead.
Its posible to add gradient color?
Gradients are not supported as of now.
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?