--- title: "Easy Chart Customizer" description: "The Easy Chart component allows you to display the history of your Tags on a chart. When you drag and drop Tags onto an Easy Chart, it automatically trends the data for you. It has a special customizer that has some default settings to help you get started." --- # Easy Chart Customizer > The Easy Chart component allows you to display the history of your Tags on a chart. When you drag and drop Tags onto an Easy Chart, it automatically trends the data for you. It has a special customizer that has some default settings to help you get started. ![The Easy Chart Customizer window with its four tabs across the top: Pens, Axes, Subplots, and Dynamic Groups. The Pens tab is open, divided into three sections. Tag History Pens lists Sine0, Sine1, and Sine2 with their Tag Path, Color, and a Preview of each pen's trend. Database Pens lists a pen named RV with its Y Column, Table, Color, and Preview. Calculated Pens lists a pen named "sine0 Sum" with a Function of RunningSum, a driving Pen of Sine0, Parameter, Color, and Preview. Each section has browse, add, edit, and delete icons down its right side, with OK and Cancel at the bottom of the window.](easy-chart-customizer-imgs/easy-chart-customizer.png) ## Description The [Easy Chart](easy-chart.md) component allows you to display the history of your Tags on a chart. When you drag and drop Tags onto an Easy Chart, it automatically trends the data for you. It has a special customizer that has some default settings to help you get started. ## Customizers The Easy Chart Customizer allows you to easily modify the chart to your own style. You can add pens and modify the contents of your pens, and create new axes, subplots, and pen groups. When you open the customizer, you'll notice four tabs at the top of the window: Pens, Axes, Subplots, and Dynamic Groups. Each have their own properties. Shown below is each tab in the Easy Chart Customizer listing all its properties along with a brief description. ### Pens Tab The Pens tab is where you can add new pens, create custom names for your pens, and group pens. There are three types of pens, and each functions in a similar manner, but what makes them different is how their data is collected. Each pen type has a few unique properties and is listed at the bottom of the table. * [**Tag pens**](#tag-history-pens-properties) - Pens are driven by the Tag history system. (Data from any historical provider can be used). * [**Database pens**](#database-pens-properties) - Pens that are driven by an SQL query. They can query for data in any connected SQL database. * [**Calculated pens**](#calculated-pens-properties) - Pens that derive their data from calculations performed on other pens. For more information, refer to the following sections: * [Easy Chart - Pen Names and Groups](historian/using-the-easy-chart/easy-chart-pen-names-and-groups/easy-chart-pen-names-and-groups.md) * [Easy Chart - Calculated Pens](historian/using-the-easy-chart/easy-chart-calculated-pens/easy-chart-calculated-pens.md) * [Using the Easy Chart](historian/using-the-easy-chart/using-the-easy-chart.md) | Property | Description | |---|---| | ![Magnifying glass browse icon](easy-chart-customizer-imgs/add-pen.png) | Add pen (Browse for Tags). | | ![Green plus icon](easy-chart-customizer-imgs/add-pen-manually.png) | Add a pen manually. | | ![Pencil and paper edit icon](easy-chart-customizer-imgs/edit-pen.png) | Edit pen. | | ![Red X delete icon](easy-chart-customizer-imgs/delete-pen.png) | Delete pen. | | **Edit Pen Panel** | Contains all the editable fields for the pen row selected. | | Name | The name of the pen is what the user will see in the legend and the pen panel. | | Enabled | If false, this pen will not show up on the chart and the data will not be generated. The user will be able to enable it via the pen control panel. | | Hidden | If true, the pen will not show up on the chart or the pen control panel. The data will be generated. | | User Selectable | If false, the pen will show up on the chart, but not the pen control panel. | | Axis | Select the Y axis this pen will use. | | Subplot | Putting pens on separate subplots can increase chart clarity. | | Group Name | The group name is used for logical grouping in the pen panel and for advanced dynamic grouping. | | Digital Offset | If true, a small gap will be placed between this and other digital pens so they don't overlap each other. | | Color | Pen color. | | Style | The style of the pen determines how it looks in the chart. | | Dash Pattern | Uses a dash pattern like "5,5" to specify 5 pixels on, 5 pixels off. | | Line Weight | The thickness of the pen's line. | | Shape | If the renderer style uses shapes, this will be the shape for each point. | | Fill Shape | If true, the shape will be filled in rather than an outline. | | Labels | If true, shows a label of the value above each bar. | | Preview | Field where you can view the pen style. | #### Tag History Pens Properties ![The Edit Pen window for a Tag history pen. A General section on the left sets Name to Sine0, with Enabled and User Selectable checked, Hidden and Digital Offset unchecked, Axis set to Default Axis, Subplot 1, and an empty Group Name. A Style section on the right sets a red Color, a Style of "Line w/ Gaps", Line Weight 1, and shows a Preview of the pen. A Data section at the bottom, outlined in red to highlight the fields unique to this pen type, holds a Tag Path of [~]Sine/Sine0 and an Aggregation Mode of Min/Max.](easy-chart-customizer-imgs/edit-panel-tag.png) | Property | Description | |---|---| | Tag Path | String-based path where the Tag is located. | | Aggregation Mode | Type of calculation (i.e., Constant, UCL, UWL, Avg, LWL, LCL, MovingAvg, Multiply, Min, Max). | #### Database Pens Properties ![The Edit Pen window for a Database pen. A General section on the left sets Name to "Realistic Value", with Enabled and User Selectable checked, Axis set to Default Axis, and Subplot 1. A Style section on the right sets a green Color and a Style of Area, with a Preview of the filled area pen. A Data section at the bottom holds the fields unique to this pen type: a Value Column of Realistic0, a Time Column of t_stamp, a Table Name of realistic_table, a Datasource of <Default>, an empty Where Clause, and a Run Diagnostics button.](easy-chart-customizer-imgs/edit-panel-db.png) | Property | Description | |---|---| | Volume Column | The name of the column for the pen's value (Y value). | | Time Column | The name of the column for the pen's timestamp (X value). | | Table Name | The name of the table where the pen will be found. | | Datasource | The name of the datasource to use for this pen (MySQL). | | Where Clause | You can specify a snippet of WHERE clause here, like "TankNum = 16." | | Run Diagnostics | Test this pen for data configuration for validity. | #### Calculated Pens Properties ![The Edit Pen window for a Calculated pen. A General section on the left sets Name to "High SP", with Enabled and User Selectable checked, Axis set to Default Axis, and Subplot 1. A Style section on the right sets a tan Color and a Style of Area, with a Preview of the pen. A Data section at the bottom holds the fields unique to this pen type: a Function of Constant, a grayed-out Driving Pen of Sine0, and a Constant Value of 200.](easy-chart-customizer-imgs/edit-panel-calc.png) | Property | Description | |---|---| | Function | Function is the type of calculation (i.e., Constant, UCL, UWL, Avg, LWL, LCL, MovingAvg, Multiply, Min, Max). | | Driving Pen | Dedicated pen that will drive the value. Parameter | Value which is the horizontal line drawn on the graph. The parameter type can be different for the Function used:**Constant Value** - constant value of the pen.(Used with the Constant function).**Window Size** - the size of the moving average window, specified as a multiplier of the chart's date range. It's the percentage of time that you're going to do the moving average on. (Used with MovingAvg function).**Factor** - multiply by 'X' factor (Used with Multiply function).**Secondary pen** - another pen added to the chart to show the sum and/or the difference. (Used with the Sum and Difference functions). | ### Axes Tab The Axes tab is where you can configure multiple axes on the Easy Chart component. | Property | Description | |--- |--- | | Name | The name of the axis is what pens use to refer to it. | | Label | The label will be displayed on the chart next to the axis. | | Type | The type of axis determines the plotting behavior. (i.e., Numeric, Logarithmic, Symbol) | | Position | The position of the axis, if automatic, axis positioning is turned off. | | Label Color | Color of the label. | | Tick Label Color | Color of the tick label. | | Tick Color | Color of the tick mark. | | Axis Inverted | If true, inverts the axis. | | Auto Range | If true, the axis will automatically scale itself to the data, rather than display a fixed range. | | Auto Range Incl Zero | If true, forces the auto range to include zero. | | Auto Range Margin | The extra margin (as percent of the total range) for the top and bottom of an auto range axis. | | Lower Bound | The lower bound of a non-auto-ranging axis. | | Upper Bound | The upper bound of a non-auto-ranging axis. | | Auto Tick Units | If true, the distance between the tick marks and the gridlines will be automatically calculated rather than a fixed number. | | Tick Units | If false, this amount will be used as the distance between tick marks. | | Gridline Units | If false, this amount will be used as the distance between gridlines. | | Number Form Override | Specifies a number format pattern to use for tick labels. Leave blank for automatic number formatting. | ![The Edit Axis window opened from the Axes tab. A General section sets Name and Label to "Sine 4", Type to Numeric, a grayed-out Position of Left, blue Label Color, Tick Label Color, and Tick Color, and Axis Inverted unchecked. A Range section has Auto Range checked, Auto Range Incl Zero unchecked, an Auto Range Margin of 0.05, and grayed-out Lower and Upper Bound fields. A Ticks / Grid Lines section has Auto Tick Units checked, grayed-out Tick Units and Gridline Units of 5, and an empty Number Format Override.](easy-chart-customizer-imgs/axes-tab.png) For more information, refer to the [Easy Chart - Axes](historian/using-the-easy-chart/easy-chart-axes/easy-chart-axes.md) page. ### Subplots Tab The Subplots tab is where you can break up a chart's plot area into multiple distinct subplots that share the X axis, and also where you can add additional subplots. | Property | Description | |----|----| | Plot Number | Number of plots in a chart plot area. | | Relative Weight | Ratio between all subplots. (If you have two subplots, and Plot 1's weight is 3 and Plot 2's weight is 1, then Plot 1 will be 3 times larger than Plot 2). | | Custom Background | If false, the default background is white. | | Background | Color of the plot area's background. | ![The Subplots tab of the Easy Chart Customizer. A tip banner explains that subplots break the chart into separate vertically stacked plots sized by their Relative Weight. The table below has Plot #, Relative Weight, Custom Background, and Background columns, with two rows: Plot 1 at weight 3 with a pale yellow background, and Plot 2, currently selected, at weight 1 with a pale green background. Green plus and red delete icons sit to the right of the table.](easy-chart-customizer-imgs/subplots-tab.png) :::info In the Pens Tab Once you add a subplot, go to the Pens Tab, edit your pen, and put your pen into a different subplot. ::: For more information, go to [Easy Chart - Subplots](historian/using-the-easy-chart/easy-chart-subplots/easy-chart-subplots.md). ### Dynamic Groups Tab Dynamic Groups are used with Database pens. They allow you to apply a dynamic condition, like using a WHERE clause, to a subset of pens. For each pen group, a dynamic string property will appear in the Property Editor under Custom Properties of your Easy Chart component. You can create a WHERE clause that will search the database and return values if the pens meet a true condition. ![The Dynamic Groups tab of the Easy Chart Customizer. A tip banner explains that each pen group listed here gets a dynamic string property on the chart component for supplying a WHERE clause snippet. Below it, an "Add Dynamic Pen Group" dropdown reads "group" next to an Add button, and a "Dynamic Pen Groups" list holds one entry, group.](easy-chart-customizer-imgs/dynamic-groups.png) #### Property Editor - Custom Properties - Where Clause for Dynamic Group Property The dynamic string property "group_group" has a value of "Sine1<0 AND Sine0<0" which corresponds to the WHERE clause configured on the Dynamic Groups tab. ![The Custom Properties section of the Property Editor, showing a single dynamic string property named group_group whose value is the WHERE clause snippet "Sine1<0 AND Sine0<0".](easy-chart-customizer-imgs/custom-property.png) To learn more about Dynamic Groups, refer to the [Easy Chart](historian/using-the-easy-chart/using-the-easy-chart.md) section.