Figure Options

Signature	Description
title(string)	Sets the figure title.
x_axis(options)	Configures the x-axis (name, ticks, font, scale).
y_axis(options)	Configures the y-axis (name, ticks, font, scale).
legend(options)	Adds and positions a legend box.
tooltip(options)	Enables an interactive hover tooltip.
grid(options)	Controls plot-area margins and size.
visual_map(options)	Controls plot-area margins and size.
data_zoom(options)	Adds interactive zoom/scroll controls.
animation(options)	Controls the figure animations.
mark_line(options)	Adds a line of interest in an existing figure.
mark_point(options)	Add a marker to a point of interest in an existing figure.

title(string)

Quick examples

Figure()
    .line([1,2,3,4],[1,4,9,16])
    .title("Quadratic scaling $n^2$")
    .save("./figures/ex_title.figure")

x_axis(options)

Option	Type	Description
name	string	Displayed name of the axis. Supports LaTeX syntax using $...$ for mathematical expressions.
name_location	string	Position of the axis name relative to the axis line: "start", "middle" / "center", or "end".
name_text_style	Map	Text styling options for the axis name (e.g. "font_size", "color", "font_weight").
name_gap	number	Distance in pixels between the axis name and the axis line.
type	string	Axis scale type: "value" (numeric), "category" (discrete labels), "time" (date/time), or "log" (logarithmic scale).
min	number or string	Minimum value of the axis.
max	number or string	Maximum value of the axis.
scale	boolean	If true, the axis range is determined purely by the data and is not forced to include zero.
inverse	boolean	If true, reverses the direction of the axis.
position	string	Placement of the axis: typically "top" or "bottom" for horizontal axes.
axis_label	Map	Configuration options for tick labels (e.g. "font_size", "rotate", "formatter", "color").
axis_line	Map	Configuration options for the main axis line (e.g. "show", "line_style").
axis_tick	Map	Configuration options for tick marks (e.g. "show", "length", "inside").
split_line	Map	Configuration options for grid split lines (e.g. "show", "line_style").
log_base	number	Base value for logarithmic axes when type is set to "log".
data	List	Category labels used when type is set to "category".

Quick examples

Figure()
    .line([1, 2, 3, 4], [10, 150,980,9000], ["name": "Sales"])
    .x_axis([
        "position": "top",                 
        "inverse": true,                   
        "type": "category",                
        "name": "Month",                   
        "name_location": "middle",         
        "name_gap": 30,                   
        "data": ["Jan", "Feb", "Mar", "Apr", "May"], 
        "axis_label": [
            "rotate": 45,                  
            "font_size": 12                
        ],
        "axis_line": [
            "show": true                  
        ],
        "axis_tick": [
            "show": true,                 
            "length": 6                
        ],
        "split_line": [
            "show": false                  
        ]
    ])
    .y_axis([
        "type": "log",  
        "log_base" : 10,
        "min": 5                
    ])
    .legend()
    .save("./figures/ex_x_axis_options")

y_axis(options)

Same as the x_axis options above.

legend(options)

Option	Type	Description
show	boolean	Enable or disable display of the legend.
type	string	Legend layout type: "plain" for a standard legend or "scroll" to enable scrolling when items exceed available space.
left	string or number	Distance from the left side of the chart container. Accepts pixel values or keywords such as "left", "center", "right", or percentage strings like "10%".
top	string or number	Distance from the top of the chart container. Accepts pixel values or keywords such as "top", "middle", "bottom", or percentage strings like "5%".
right	string or number	Distance from the right side of the chart container. Accepts pixel values or percentage strings.
bottom	string or number	Distance from the bottom of the chart container. Accepts pixel values or percentage strings.
orient	string	Layout direction of legend items: "horizontal" or "vertical".
align	string	Alignment of legend items within the legend box: "auto", "left", or "right".
item_gap	number	Spacing in pixels between individual legend items.
text_style	Map	Configuration object for legend text styling (e.g. "font_size", "color", "font_weight", "font_family").
selected_mode	boolean or string	Controls item selection behavior: true (multiple selection), false (no selection), "single" (only one active at a time), or "multiple" (explicit multiple selection).

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [10, 25, 20, 35, 40], ["name": "Series A"])
    .line([1, 2, 3, 4, 5], [15, 30, 25, 40, 45], ["name": "Series B"])
    .legend([
        "show": true,               
        "type": "scroll",                   
        "left": "center",          
        "top": "5%",                     
        "right": "5%",                 
        "bottom": "auto",                  
        "orient": "horizontal",            
        "align": "auto",                  
        "item_gap": 15,                   
        "text_style": [
            "font_size": 14,                
            "font_weight": "bold",          
            "color": "#a93838",                
            "font_family": "Arial"          
        ],
        "selected_mode": "single"         
    ])
    .save("./figures/ex_legend_options")

tooltip(options)

Option	Type	Description
show	boolean	Enable or disable the tooltip display.
trigger	string	Defines the trigger mode for showing the tooltip: "item" (per data point), "axis" (per axis), or "none" (disabled).
trigger_on	string	Specifies the events that trigger the tooltip: "mousemove", "click", or "none".
confine	boolean	If true, constrains the tooltip within the chart boundaries to prevent overflow.
text_style	Map	Configuration object for tooltip text styling (e.g., "color", "font_size", "font_weight", "font_family").
background_color	Color	Background color of the tooltip.
border_color	Color	Border color of the tooltip.
border_width	number	Width of the tooltip border in pixels.
padding	number or List	Padding inside the tooltip box. Can be a single number for all sides or a list [top, right, bottom, left].

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [10, 15, 25, 35, 50], ["name": "Series A"])
    .line([1, 2, 3, 4, 5], [15, 30, 45, 55, 70], ["name": "Series B"])
    .tooltip([
        "show": true,                      
        "trigger": "axis",                  
        "trigger_on": "mousemove",         
        "confine": true,                    
        "background_color": "rgba(50,50,50,0.8)", 
        "border_color": "#333",            
        "border_width": 2,                  
        "padding": [8, 12, 8, 12],        
        "text_style": [
            "color": "#fff",               
            "font_size": 14,                
            "font_weight": "bold",         
            "font_family": "Arial" 
        ]
    ])
    .legend()
    .save("./figures/ex_tooltip_options")

grid(options)

Option	Type	Description
show	boolean	Display the grid border. If false, only the plot area is used without visible border.
left	string or number	Distance between the grid and the left edge of the container. Can be a pixel value or percentage string like "10%".
right	string or number	Distance between the grid and the right edge of the container.
top	string or number	Distance between the grid and the top edge of the container.
bottom	string or number	Distance between the grid and the bottom edge of the container.
width	string or number	Explicit width of the grid area. Overrides left/right if set.
height	string or number	Explicit height of the grid area. Overrides top/bottom if set.
contain_label	boolean	If true, the grid area automatically adjusts

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [10, 25, 20, 35, 40], ["name": "Series A"])
    .grid([
        "show": true,                      
        "left": "5%",                    
        "right": "5%",                    
        "top": "5%",                      
        "bottom": "5%",                  
        "width": "50%",
        "height": "50%", 
        "contain_label": true,
        "background_color": "#f5f5f5" 
    ])
    .legend()
    .save("./figures/ex_grid_options")

Marks

Option	Type	Description
mark_point	Map	Highlight specific data points (e.g. max/min).
mark_line	Map	Draw reference lines (e.g. averages).
mark_area	Map	Shade reference areas.

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [5, 3, 8, 2, 7], [
        "name": "With Marks",
        "symbol_size": 10,
        "mark_point": [
            "data": [["type": "max", "name": "Max"], ["type": "min", "name": "Min"]]
        ],
        "mark_line": [
            "data": [["type": "average", "name": "Average"]]
        ]
    ])
    .line([7, 8, 9, 10, 11], [4, 6, 2, 9, 5], [
        "name": "Only Mark Line",
        "symbol_size": 10,
        "mark_line": [
            "data": [["type": "average", "name": "Avg"]]
        ]
    ])
    .legend()
    .save("./figures/ex_line_marks")

data_zoom(options)

Option	Type	Description
type	string	Type of data zoom: "inside" for mouse/touch zoom or "slider" for a visible slider bar.
start	number	Window start position in percentage (0–100).
end	number	Window end position in percentage (0–100).
start_value	number or string	Window start position by data value.
end_value	number or string	Window end position by data value.
orient	string	Orientation of the slider: "horizontal" or "vertical".
zoom_lock	boolean	If true, the zoom scale is locked and cannot be adjusted.
realtime	boolean	If true, updates the chart in real time while zooming.

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [10, 25, 20, 35, 40], ["name": "Series A"])
    .line([1, 2, 3, 4, 5], [15, 30, 25, 40, 45], ["name": "Series B"])
    .data_zoom([
        "type": "slider",
        "start": 20,
        "end": 60,
        "start_value": 10,
        "end_value": 50,
        "orient": "horizontal",
        "zoom_lock": true,
        "realtime": true
    ])
    .legend()
    .save("./figures/ex_data_zoom_options")

animation(options)

Option	Type	Description
animation	boolean	Enable/disable animation.
animation_threshold	number	Disable animation when data count exceeds this.
animation_duration	number	Initial animation duration (ms).
animation_easing	string	Easing function name.
animation_delay	number	Delay before animation starts (ms).
animation_duration_update	number	Update animation duration (ms).
animation_easing_update	string	The animation used when data is updated.
animation_delay_update	number	Update animation delay (ms).

The possible easing function and their effect is summarized in the table below.

Easing Function	Description
linear	No easing; constant speed from start to end.
quadraticIn	Starts slow and accelerates (ease-in, quadratic).
quadraticOut	Starts fast and decelerates (ease-out, quadratic).
quadraticInOut	Slow start and end, faster in the middle.
cubicIn	Stronger acceleration at the start (cubic).
cubicOut	Stronger deceleration at the end (cubic).
cubicInOut	Smooth acceleration and deceleration (cubic).
quarticIn	Even sharper acceleration at the beginning.
quarticOut	Even sharper deceleration at the end.
quarticInOut	Very smooth but dramatic acceleration/deceleration.
quinticIn	Very strong acceleration from rest.
quinticOut	Very strong deceleration to rest.
quinticInOut	Extreme smoothness with strong mid-motion speed.
sinusoidalIn	Slow start using sine curve.
sinusoidalOut	Slow end using sine curve.
sinusoidalInOut	Smooth sine-based easing throughout.
exponentialIn	Starts extremely slow, then rapidly speeds up.
exponentialOut	Starts fast, then slows dramatically.
exponentialInOut	Combines both exponential acceleration and deceleration.
circularIn	Slow start following a circular curve.
circularOut	Slow end following a circular curve.
circularInOut	Smooth circular motion at both ends.
elasticIn	Starts with elastic bounce effect (spring-like).
elasticOut	Ends with elastic bounce effect.
elasticInOut	Elastic effect at both start and end.
backIn	Slight backward motion before moving forward.
backOut	Overshoots slightly, then settles back.
backInOut	Combines backward start and overshoot end.
bounceIn	Bounce effect at the beginning.
bounceOut	Bounce effect at the end.
bounceInOut	Bounce at both start and end.

Quick examples

Figure()
    .line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
        "name": "Fast Animation",
        "animation": true,
        "animation_duration": 500,
        "animation_easing": "cubicOut",
        "animation_delay": 0,
        "animation_duration_update": 300,
        "animation_easing_update": "cubicInOut",
        "animation_delay_update": 0
    ])
    .line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
        "name": "Slow Animation",
        "animation": true,
        "animation_duration": 2000,
        "animation_easing": "elasticOut",
        "animation_delay": 200,
        "animation_duration_update": 1000,
        "animation_easing_update": "elasticInOut",
        "animation_delay_update": 100
    ])
    .line([13, 14, 15, 16, 17], [3, 6, 11, 18, 27], [
        "name": "No Animation",
        "animation": false
    ])
    .legend()
    .save("./figures/ex_line_animation")