Links

Brush Chart

Brush chart allows users to constrain the results on their graph by choosing to Include or Exclude certain areas. This is a much more interactive filtering method, as the user defines what they want to see or remove by highlighting the particular area on their graph.
You can find a more in depth explanation about the brush on this page: https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/
Image 1: The Brush Chart
Properties of Brush Chart
Property Name
Data type
Description
1
Data source
List
Data Model
Source of the data list for the widget.
2
X axis category
Text
Expression
Text categories displayed on the x-axis.
3
Y axis values
Number
Expression
Numerical values ​​displayed on the y-axis.
4
Series
Text
Expression
This field is used to create different series from the same data source.
It's not mandatory.
5
Show Animation
Boolean
Expression
Show render animation. use true or false
6
Y-Axis label position
Text
Dropdown
Sets the position of the Y axis values ​​to the right or left.
(left(false), right(true)).
7
Custom scale
Boolean
Change the scale to a custom scale with custom properties.
8
Min scale value
Number
Expression
Minimum value for the scale.
9
Max scale value
Number
Expression
Maximum value for the scale.
10
Tick scale amount
Number
Expression
Number of visual marks for the scale.
11
Set initial scope
Boolean
Boolean to specify zoomed values ​​of the chart.
12
Start scope value
Number
Expression
Initial value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want from June you use: 6
13
End scope value
Number
Expression
End value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want until December you use: 12
14
Height
Text
Expression
Height of the main graphic.
15
Width
Text
Expression
Width of the main chart.
16
Control chart height
Number
Expression
The height value of the lower graph (control).
17
Show tooltip
Boolean
Show tooltips.
18
Prefix
Text
Expression
Displays a prefix for values ​​in tooltips.
19
Postfix
Text
Expression
Displays a suffix for values ​​in tooltips.
20
Label decimals
Number
Expression
Set the number of decimal places displayed for y-axis values.
21
Show grid
Boolean
Boolean to display the grid options.
22
Grid lines vertical
Boolean
Expression
Show vertical lines in the grid. Use true or false.
23
Grid lines horizontal
Boolean
Expression
Show horizontal lines in the grid. use true or false
24
Grid lines color
Text
Expression
Change the color of the lines in the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
25
Background color
Text
Expression
Change the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
26
Theme
Text
Dropdown
Change the text and background colors of the chart. (Light, Dark).
27
Template
Text
Dropdown
A set of predefined color values ​​for chart groups. (Palette1, Palette2, Palette3, Palette4, Palette5, Palette6, Palette7, Palette8, Palette9, Palette10).
28
Lines width
Number
Expression
Numerical value of the thickness of the lines within the graph.
29
Legend font size
Number
Expression
Change the font size of the legend.
30
Legend position
Text
Dropdown
Change the position of the legend. (Bottom, top, right, left).