header

[ root » graph » legend » header ]

Set and style the header object, which appears at the top of the chart's legend (by default).

AttributeTypeInfo

alpha

Numeric

Demo

Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

background-color backgroundColor

String

Demo

Sets the background color of the object. Colors can be entered by name (e.g. "red", "blue", "yellow"), in hexadecimal notation (e.g. "#FF0000", "#0000FF", "#FFFF00"), or in RGB notation (e.g. "rgb(255,0,0)", "rgb(0,0,255)", "rgb(255,255,0)").

One color will set a solid background color, two colors will, by default, create a horizontal gradient. For more complex gradients, use gradient-colors and gradient-stops.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-color-1 backgroundColor1

String

Demo

Sets the first color of a 2 color background gradient of the object. To be used with background-color-2.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-color-2 backgroundColor2

String

Demo

Sets the second color of a 2 color background gradient of the object. To be used with background-color-1.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-fit backgroundFit

String

Demo

Sets the direction/s on which the background image is being "stretched".

"x" | "y" | "xy"

background-image backgroundImage

String

Demo

Sets a background image for the object. Value can be a local file or a web image's location.

"image.png" | ...

background-position backgroundPosition

String

Demo

Sets the position of the background when the background-repeat value is no-repeat.

"0 0" | "50 100" | "80% 60%" | ...

background-repeat backgroundRepeat

String

Demo

Sets the repeating mode for the background image.

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"

bold

Boolean

Demo

Sets whether the text is displayed with bold characters or not in the Header of the Legend.

true | false | 1 | 0

border-bottom borderBottom

String

Demo

Defaults to black if border-color is not set.

"2px solid #f00" | ...

border-color borderColor

String

Demo

Defaults to 1px if border-width is not set.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

border-left borderLeft

String

Demo

Sets the object's left border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-radius borderRadius

Mixed

Demo

Sets the object's border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A single value will affect all 4 corners, while multiple values will have separate effects on each corner, with the first value affecting the top-left corner, the second value affecting the top-right corner, and so on, in a clockwise direction. A negative value will cut a corner off without rounding.

4 | "6px" | "6px 10px 3px 5px" | "-10px" | ...

border-radius-bottom-left borderRadiusBottomLeft

Mixed

Demo

Sets the object's bottom-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-bottom-right borderRadiusBottomRight

Mixed

Demo

Sets the object's bottom-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-left borderRadiusTopLeft

Mixed

Demo

Sets the object's top-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-right borderRadiusTopRight

Mixed

Demo

Sets the object's top-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-right borderRight

String

Demo

Sets the object's right border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-top borderTop

String

Demo

Sets the object's top border style. Values must include the border width, style, and color. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-width borderWidth

Mixed

Demo

Requires border-color.

4 | "6px" | ...

callout

Boolean

Demo

Sets whether an object will have a callout arrow or not.

true | false | 1 | 0

callout-extension calloutExtension

Mixed

Demo

Sets the length of the extension that extends beyond the tip of the callout arrow.

4 | "6px" | ...

callout-height calloutHeight

Mixed

Demo

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow.

4 | "6px" | ...

callout-hook calloutHook

Array

Demo

Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart.

[200, 50] | ...

callout-offset calloutOffset

Mixed

Demo

Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the callout-position.

4 | "6px" | ...

callout-position calloutPosition

String

Demo

Sets the position for the object's callout arrow. The position is "bottom" by default.

"top" | "right" | "bottom" | "left"

callout-width calloutWidth

Mixed

Demo

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow.

4 | "6px" | ...

clip-text clipText

Boolean

Demo

Cuts off the text at a specified width. Requires a setting for width.

true | false | 1 | 0

color

String

Demo

Sets the text's color in the Header of the Legend.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

fill-angle fillAngle

Numeric

Demo

Sets the angle of the axis along which the linear gradient is drawn.

-45 | 115 | ...

fill-offset-x fillOffsetX

Mixed

Demo

Sets an X offset to apply to the fill.

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Demo

Sets an Y offset to apply to the fill.

4 | "6px" | ...

fill-type fillType

String

Demo

Sets the background gradient fill type to either linear or radial.

"linear" | "radial"

font-angle fontAngle

Numeric

Demo

Sets the rotation angle of the Header of the Legend. Similar with angle.

-45 | 115 | ...

font-color fontColor

String

Demo

Sets the text's color of the Header of the Legend. Similar with color.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

font-family fontFamily

String

Demo

Sets the text's font family of the Footer of the Legend.

"Arial" | "Tahoma,Verdana" | ...

font-size fontSize

Mixed

Demo

Sets the text's font size of the Header of the Legend.

4 | "6px" | ...

font-style fontStyle

String

Demo

Sets the text's font style of the Header of the Legend. Similar with italic.

"none" | "italic" | "oblique"

font-weight fontWeight

String

Demo

Sets the text's font weight of the Header of the Legend. Similar with bold.

"normal" | "bold"

gradient-colors gradientColors

String

Demo

Sets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with gradient-stops.

"#f00 #0f0 #00f" | ...

gradient-stops gradientStops

String

Demo

Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors.

"0.1 0.5 0.9" | ...

height

Mixed

Demo

Sets the object's height.

10 | "20px" | 0.3 | "30%" | ...

italic

Boolean

Demo

Sets whether the text of the Header of the Legend is displayed with italic characters or not.

true | false | 1 | 0

max-chars maxChars

Numeric

Demo

Sets the maximum number of characters displayed by the text label of the Header of the Legend. If value is smaller than the length of the text, the original text will be trimmed and '...' will be appended at the end.

5 | 10 | ...

max-width maxWidth

Mixed

Demo

Sets the maximum width of the text box. If text is longer than the max-width value, it will overlap the box or will wrap if wrap-text is set to true.

10 | "20px" | 0.3 | "30%" | ...

offset-x offsetX

Mixed

Demo

Sets an X offset to apply when positioning the object/shape.

4 | "6px" | ...

offset-y offsetY

Mixed

Demo

Sets a Y offset to apply when positioning the object/shape.

4 | "6px" | ...

padding

Mixed

Demo

Sets the object's bottom padding around the text of the Header of the Legend.

10 | "5px" | "10 20" | "5px 10px 15px 20px" | ...

padding-bottom paddingBottom

Mixed

Demo

Sets the object's bottom padding around the text of the Header of the Legend.

4 | "6px" | ...

padding-left paddingLeft

Mixed

Demo

Sets the object's left padding around the text of the Header of the Legend. padding-left here may push the text out of the containing legend if the number is big enough.

4 | "6px" | ...

padding-right paddingRight

Numeric

Demo

Sets the object's right padding around the text of the Header of the Legend. padding-right here will not push the text out of the containing legend.

4 | "6px" | ...

padding-top paddingTop

Mixed

Demo

Sets the object's top padding around the text of the Header of the Legend.

4 | "6px" | ...

rtl (right-to-left)

Boolean

Demo

Renders text right-to-left. Default value is false.

true | false | 1 | 0

shadow

Boolean

Demo

Sets whether the object's shadow is visible or not.

Has limited effect on HTML5 implementation.

true | false | 1 | 0

shadow-alpha shadowAlpha

Numeric

Demo

Sets the transparency of the shadow of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

shadow-angle shadowAngle

Numeric

Demo

Sets the angle of the shadow underneath the object.

-45 | 115 | ...

shadow-blur shadowBlur

Mixed

Demo

Sets the blur effect size for the shadow of the object.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color shadowColor

String

Demo

Sets the color of the shadow of the object.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

shadow-distance shadowDistance

Mixed

Demo

Sets the distance between the shadow and the object.

4 | "6px" | ...

text

String

Demo

Sets the text content of the object of the Header of the Legend.

"Some Text" | ...

text-align textAlign

String

Demo

Sets the text's horizontal alignment relative to the box of the Header of the Legend.

"left" | "center" | "right"

text-alpha textAlpha

Numeric

Demo

Sets the text's transparency of the Header of the Legend.

0.3 | 0.9 | ...

text-decoration textDecoration

String

Demo

Sets the text's decoration of the Header of the Legend. Similar with underline.

"none" | "underline"

underline

Boolean

Demo

Sets whether the text of the Header of the Legend is displayed with underlined characters or not.

true | false | 1 | 0

vertical-align verticalAlign

String

Demo

Sets the text's vertical alignment relative to the object's box of the Header of the Legend.

"top" | "middle" | "bottom"

visible

Boolean

Demo

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON.

true | false | 1 | 0

width

Mixed

Demo

Sets the object's width.

10 | "20px" | 0.3 | "30%" | ...

wrap-text wrapText

Boolean

Demo

Sets whether the text will wrap, depending on the width of the object. Requires a widthsetting.

true | false | 1 | 0