ZiYa Plugin - T R A I N I N G

This tutorial helps you discover the various preferences you can set in your chart stylesheet. You can edit the live stylesheet below and hit the 'refresh' icon or [ctrl-s] to view the affected areas.

Stylesheet

# Edit and refresh to see affected chart
<%=chart :bar%>

# Set y axis styles
  <%=component :axis_category%>
    color:            ff0000
    skip:             0
    font:             arial
    bold:             true
    size:             10
    alpha:            90
    orientation:      horizontal

# Set x styles
  <%=component :axis_value%>
    color:            a79d91
    min:                -50
    max:                 80
    steps:               1
    prefix:              ''
    suffix:              ''
    decimals:            2
    decimal_char:        '.'
    separator:           "blee"
    show_min:            true

# Set x/y axis ticks color
  <%=component :axis_ticks%>
    value_ticks:      true
    category_ticks:   true
    major_thickness:  1
    major_color:      54544c
    minor_thickness:  1
    minor_color:      a19d91
    minor_count:      2
    
  # Set chart background color
  <%=component :chart_rect%>
    x:                60
    y:                35
    width:            300
    height:           195
    positive_color:   f8af68      
    positive_alpha:   40
    negative_color:   f88868
    negative_alpha:   40

# Set default chart border
  <%=component :chart_border%>
    left_thickness:   2
    bottom_thickness: 1
    top_thickness:    1
    right_thickness:  1

# Set horizontal grid color
  <%=component :chart_grid_h%>
    thickness:        1
    color:            000000
    alpha:            7
    type:             solid

# Set vertical grid color
  <%=component :chart_grid_v%>
    thickness:        1
    color:            000000
    alpha:            7
    type:             solid

# Set chart labels color and size    
  <%=component :chart_value%>
    color:            F5F0BE
    size:             9
    prefix:           'a_'
    suffix:           '_b'
    decimals:         2
    decimal_char:     '.'
    separator:        ','
    position:         top
    hide_zero:        true
    as_percentage:    false
    font:             arial
    size:             10
    bold:             true
    color:            ffffff
    background_color: 000000
    alpha:            50
    
  # Set legend foreground color
  <%=component :legend_label%>
    color:            ffffff
    size:             10
    layout:           horizontal
    bullet:           circle
    font:             arial
    bold:             true
    alpha:            75

# Set legend background color
  <%=component :legend_rect%>
    x:                60
    y:                0
    width:            300
    height:           10
    margin:           10
    fill_color:       f8af68
    fill_alpha:       20
    line_color:       000000
    line_alpha:       50
    line_thickness:   1

# Set 2 series color
  <%=component :series_color%>
    colors:           5f5a38,f8af68

Components

axis_category

Sets the label attributes for the category-axis. The category-axis is the horizontal axis or x-axis. This axis appears vertical in bar charts.

skip: Default is '0'
If this axis holds too many labels, the skip key allows skipping (hiding) some labels. A zero value doesn't hide any labels. If the skip value is 1, then the first label is displayed, the following label is skipped, and so on. If the skip value is 2, then the first label is displayed, the following 2 are skipped, and so on. Another way to hide labels is by passing empty strings to chart_data in place of category labels.
font: Default is 'arial'
The font used in the category-axis. See the Fonts section below.
bold: Default is 'true'
A boolean value that indicates whether the font is bold or not.
size: The font's size. The default font size is calculated based on the chart size
color: Default is '000000'
The font's color. This must be a string holding triple hexadecimal values representing the red, green, and blue components for a color.
alpha: Default is '90'
This affects the labels' transparency, only when the embedded font is used (see the Fonts section below.) Valid values are 0 (fully transparent) to 100 (fully opaque). To hide all labels in this axis, set the alpha to 0
orientation: Default is 'horizontal'
This affects the labels' orientation, only when the embedded font is used (see the Fonts section below.) Valid values are horizontal, diagonal_up, diagonal_down, vertical_up, and vertical_down. Polar charts also accept the value circular.
margin: Default is 'false'
This applies to area, stacked area, and line charts only. It's a boolean value that indicates whether to leave a margin on the left and right of the graph, or bump it against the left and right chart borders. In mixed charts, there's always a margin to algin area and line charts with column charts
min: This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the minimum value to start this axis with. The default is calculated from the chart's data
max: This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the maximum value to end this axis with. The default is calculated from the chart's data
steps: Default is '4'
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the number of steps between the minimum and maximum values. If the minimum value is negative, and the maximum value is positive, then 'steps' is the number of steps between zero and the larger of max and absolute min.
prefix: Default is ''
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the characters to add before the value numbers (example: $10).
suffix:Default is ''
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the characters to add after the value numbers (example: 10%).
decimals: Default is '0' (no decimals)
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the number of decimal places to the right of the decimal point (example: 10.45).
decimal_char: Default is '.'
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the character to use at the left of a decimal fraction (example: 1.5).
separator: Default is ''
This applies to scatter charts only, when the category-axis is calculated like the value-axis. This determines the character to place between every group of thousands (example: 1,000,000).