Style

Vizzu offers a wide variety of styling options when you want to personalize the look and feel of your animated charts. The styling properties are organized into a hierarchical structure. Font styles, when set on a higher level of this hierarchy, will be inherited on all lower levels. You can use absolute sizing (px, pt) and relative (%, em, vw).

Similarly to all other parameters of the animate method, Vizzu will animate the changes in the styling of the charts. This provides an excellent opportunity to check and control the effect of these changes.

You can find below the complete list of the available styling properties and their default values.

+ expand all

backgroundColor: #FFFFFFFF

borderColor: #FFFFFFFF

borderWidth: 0.000000

fontFamily: Roboto, sans-serif

fontSize: 1.000000em

fontStyle: normal

fontWeight: normal

+ legend

 backgroundColor: #00000000

 borderColor: #00000000

 borderWidth: 0.000000

 + label

  backgroundColor: #00000000

  color: #999999FF

  fontFamily:

  fontSize: 1.000000em

  fontStyle: normal

  fontWeight: normal

  maxFractionDigits: 3.000000

  numberFormat: prefixed

  numberScale: k,M,G,T,P,E,Z,Y

  paddingBottom: 0.416667em

  paddingLeft: 0.416667em

  paddingRight: 0.416667em

  paddingTop: 0.416667em

  textAlign: left

 + marker

  size: 1.285714em

  type: circle

 maxWidth: 30.000000%

 paddingBottom: 5.000000em

 paddingLeft: 1.666667em

 paddingRight: 0.416667em

 paddingTop: 0.833333em

 + title

  backgroundColor: #00000000

  color: #999999FF

  fontFamily:

  fontSize: 1.166667em

  fontStyle: normal

  fontWeight: normal

  maxFractionDigits: 3.000000

  numberFormat: prefixed

  numberScale: k,M,G,T,P,E,Z,Y

  paddingBottom: 0.357143em

  paddingLeft: 0.357143em

  paddingRight: 0.357143em

  paddingTop: 0.857143em

  textAlign: left

 width: 8.333333em

+ logo

 filter: color(#D8D8D8FF)

 paddingBottom: 47.500000%

 paddingLeft: 40.000000%

 paddingRight: 40.000000%

 paddingTop: 47.500000%

 width: 3.186307em

paddingBottom: 0.833333em

paddingLeft: 0.416667em

paddingRight: 0.416667em

paddingTop: 0.416667em

+ plot

 backgroundColor: #00000000

 borderColor: #00000000

 borderWidth: 0.000000

 + marker

  borderOpacity: 1.000000

  borderOpacityMode: premultiplied

  borderWidth: 1.000000

  circleMaxRadius: 0.050000

  circleMinRadius: 0.005000

  colorGradient: #4171CDFF 0.000000, #8536C7FF 0.250000, #C33E7FFF 0.500000, #E9974EFF 0.750000, #F3F239FF 1.000000

  colorPalette: #4171CDFF #03AE71FF #F4941BFF #F4C204FF #D49664FF #F25456FF #9E67ABFF #BCA604FF #846E1CFF #FC763CFF #B462ACFF #F492FCFF #BC4A94FF #9C7EF4FF #9C52B4FF #6CA2FCFF #5C6EBCFF #7C868CFF #AC968CFF #4C7450FF #AC7A4CFF #7CAE54FF #4C7450FF #9C1A6CFF #AC3E94FF #B41204FF

  fillOpacity: 1.000000

  + guides

   color: #E8E8E8FF

   lineWidth: 0.500000

  + label

   angle: 0.000000rad

   backgroundColor: #00000000

   color: #00000000

   filter: lightness(0.000000)

   fontFamily:

   fontSize: 0.916667em

   fontStyle: normal

   fontWeight: bold

   format: measureFirst

   maxFractionDigits: 3.000000

   numberFormat: grouped

   numberScale: k,M,G,T,P,E,Z,Y

   orientation: horizontal

   paddingBottom: 0.454545em

   paddingLeft: 0.454545em

   paddingRight: 0.454545em

   paddingTop: 0.454545em

   position: center

   textAlign: center

  lineMaxWidth: 0.010000

  lineMinWidth: 0.001000

  maxLightness: 0.400000

  minLightness: -0.400000

  rectangleSpacing: null

 overflow: hidden

 paddingBottom: 5.000000em

 paddingLeft: 6.666667em

 paddingRight: 3.750000em

 paddingTop: 4.166667em

 + xAxis

  color: #CCCCCCFF

  + guides

   color: #EDEDEDFF

   lineWidth: 1.000000

  + interlacing

   color: #F7F7F7FF

  + label

   angle: 0.000000rad

   backgroundColor: #00000000

   color: #999999FF

   fontFamily:

   fontSize: 1.000000em

   fontStyle: normal

   fontWeight: normal

   maxFractionDigits: 3.000000

   numberFormat: prefixed

   numberScale: k,M,G,T,P,E,Z,Y

   orientation: horizontal

   paddingBottom: 0.666667em

   paddingLeft: 0.666667em

   paddingRight: 0.666667em

   paddingTop: 0.666667em

   position: min-edge

   side: negative

   textAlign: left

  + ticks

   color: #CCCCCCFF

   length: 0.416667em

   lineWidth: 1.000000

   position: outside

  + title

   backgroundColor: #00000000

   color: #999999FF

   fontFamily:

   fontSize: 1.166667em

   fontStyle: normal

   fontWeight: normal

   maxFractionDigits: 3.000000

   numberFormat: prefixed

   numberScale: k,M,G,T,P,E,Z,Y

   orientation: horizontal

   paddingBottom: 0.357143em

   paddingLeft: 0.357143em

   paddingRight: 0.357143em

   paddingTop: 1.714286em

   position: min-edge

   side: negative

   textAlign: left

   vposition: middle

   vside: upon

 + yAxis

  color: #CCCCCCFF

  + guides

   color: #EDEDEDFF

   lineWidth: 1.000000

  + interlacing

   color: #F7F7F7FF

  + label

   angle: 0.000000rad

   backgroundColor: #00000000

   color: #999999FF

   fontFamily:

   fontSize: 1.000000em

   fontStyle: normal

   fontWeight: normal

   maxFractionDigits: 3.000000

   numberFormat: prefixed

   numberScale: k,M,G,T,P,E,Z,Y

   orientation: horizontal

   paddingBottom: 0.666667em

   paddingLeft: 0.666667em

   paddingRight: 0.666667em

   paddingTop: 0.666667em

   position: min-edge

   side: negative

   textAlign: left

  + ticks

   color: #CCCCCCFF

   length: 0.416667em

   lineWidth: 1.000000

   position: outside

  + title

   backgroundColor: #00000000

   color: #999999FF

   fontFamily:

   fontSize: 1.166667em

   fontStyle: normal

   fontWeight: normal

   maxFractionDigits: 3.000000

   numberFormat: prefixed

   numberScale: k,M,G,T,P,E,Z,Y

   orientation: horizontal

   paddingBottom: 1.071429em

   paddingLeft: 0.357143em

   paddingRight: 0.357143em

   paddingTop: 0.357143em

   position: min-edge

   side: upon

   textAlign: left

   vposition: end

   vside: positive

+ title

 backgroundColor: #00000000

 color: #494949FF

 fontFamily:

 fontSize: 2.166667em

 fontStyle: normal

 fontWeight: normal

 maxFractionDigits: 3.000000

 numberFormat: prefixed

 numberScale: k,M,G,T,P,E,Z,Y

 paddingBottom: 0.000000px

 paddingLeft: 0.384615em

 paddingRight: 0.384615em

 paddingTop: 0.576923em

 textAlign: center

+ tooltip

 arrowSize: 8.000000

 backgroundColor: #FFFFFFFF

 borderColor: #D8D8D8FF

 borderRadius: 3.000000

 borderWidth: 1.000000

 color: #191919FF

 distance: 2.000000

 dropShadow: 3.000000

 fontFamily: Roboto, sans-serif

 fontSize: 12.000000px

 fontStyle: normal

 fontWeight: normal

 layout: multiLine

 seriesName:

 shadowColor: #0000000A