Chart appearance in JavaScript Chart control
18 Nov 20181 minute to read
Custom color palette
Customize the default color of series or points by providing a custom color palette using the palettes property.
Supported Color Formats
You can specify colors in various CSS-supported formats:
-
Hex:
"#E94649","#F6B53F" -
RGB:
"rgb(233, 70, 73)","rgb(246, 181, 63)" -
RGBA:
"rgba(233, 70, 73, 0.5)" -
HSL:
"hsl(0, 79%, 60%)" -
HWB:
"hwb(0 9% 8%)"
Data point customization
The color of individual data point or data points within a range can be customized using the options below.
Point color mapping
You can bind the color for the points from dataSource for the series using pointColorMapping property.
Range color mapping
You can differentiate data points based on their y values using rangeColorSettings in the chart.
Point level customization
Marker, data label, and fill color of individual data points can be customized using the pointRender and textRender events.
Chart area customization
Customize the chart background
Use the background and border properties on the chart to change its background color and border.
Chart margin
Set the chart margin relative to its container using the margin property.
Chart area customization
To customize the plotting region (chart area), use the chartArea properties: background and border change the chart area’s appearance, and width adjusts its size.
Chart area margin
You can customize the space between the chart area from its chart container through margin property.
Animation
Customize animation for a series using the animation property. Use enable to turn animation on or off; duration controls the animation length and delay sets when the animation starts.
Fluid animation
Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [animate] method.