# CHART USER GUIDE # Introduction If you need help with installation, please refer to the [install guides](https://tsdocs.vitaracharts.com/install-docs) You can use the left navigation bar to see details of each individual chart. A live portal for accessing the charts in Thoughtspot and trying out various properties is also available at [VitaraCharts Cloud Play Live](https://vitara.thoughtspot.cloud/#/pinboard/8fc2594c-e77e-444e-8754-f2a9eea1403b)\ “Please contact Vitara sales team (sales @vitaracharts.com) for credentials # Angular Gauge Chart The Angular Gauge chart is designed to display specific data using a semicircular shape with the pointer. The semicircular shape is created by defining the lower limit and upper limit, using functions like sum, min, max, count. Within that scale, we can create various color ranges in thresholds to classify the data. We can make the pointer to indicate the sum/ avg/ min/ max/ count/ first/ last values of the metric over the semicircular shape. Thresholds can also be created on the pointer. ## Inputs Metrics: 1 or more metrics Attributes: 1 attribute.

## Axes You can add a title in Angular gauge chart and can do text formattings to the title. User can do labels formattings too in the Axes property tab.

In Vitara Charts, the new features added to the Gauge chart where there are some implementations in the Gauge property editor. Now, we have Dial, Gauge and Grid Line properties in the Gauge property. #### Data Labels: Using the Data Labels tab, you can control how data labels and metric formats are displayed on the chart. It allows you to adjust the label style, formatting, and position. Refer to the screenshot below for guidance. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FOlTdafvy9n5ZObf2kOIi%252Funknown.png%3Falt%3Dmedia%26token%3D5959d75d-8780-4723-8a3b-ea4c56bc2af2\&width=768\&dpr=3\&quality=100\&sign=c37c57ea\&sv=2) ## Gauge Users can see the pointer at any aggregation level of metrics with start and end values. We can apply Start and End angles for the gauge chart.

Below is the example of the Cost metric shown with Avg aggregation with start value as ‘First’ aggregation and end value as ‘Last’ aggregation. The ‘Start’ angle is 30 degrees and the ‘End’ angle is 200 degrees.

## Dial and Grid Line We can now see the pointer (Current Value) at any aggregation level of metrics with the start and end values.

In Vitara charts, the dial properties are introduced. Dial’s color, dial’s width, dial’s border color, dial’s border width, Start and End position of needle, Grid line width and Grid line color are the new features introduced in the angular gauge chart.

Below screenshot is the example where all the dial and grid line properties are applied. Average aggregation is applied for current value and the dial and dial’s border properties are applied. Dial’s color - blue Dial’s width - 12 Border color - green Border width - 2 Start position - 65 End position - 105 Grid line width - 2 Grid line color - black

### Thresholds Thresholds can also be created on the both background arc and the pointer, Below is the reference screenshot

## Background Image The steps to set a background image for all Vitara charts are explained in [*backgroundImage*](/readme/background-images). # Bar/Column Chart A bar chart, often known as a bar graph, is a type of chart that displays organized data using rectangular bars with lengths proportionate to the values they represent. The bars can be plotted horizontally or vertically. A vertical bar chart is also known as a column bar chart. Users will separate icons for horizontal and vertical charts in Vitara Charts and will need to switch as needed. ## Inputs Metrics - 1 or more metrics Attributes - 1 or more attributes ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FSaHReHtJ0FyDzGBGCft5%252Fimage.png%3Falt%3Dmedia%26token%3Dcde1862d-03fe-457d-a0ff-c23f208a7a54\&width=768\&dpr=3\&quality=100\&sign=11131634\&sv=2) ### Color By: Users can also create a chart using the Color By drop zone. Refer to the screenshot below for guidance. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F1KiYogz5PhfFPxLRuD0E%252Funknown.png%3Falt%3Dmedia%26token%3D04919ff0-67f8-4f3e-a7f1-6393bfeab2ec\&width=768\&dpr=3\&quality=100\&sign=2e651ff8\&sv=2) ## Thresholds In terms of business, specific parts of the chart should be highlighted to attract the attention of decision makers. For example, highlight the stores with total sales greater than a certain amount, or the top ten products with high sales over the previous winter. Thresholds are extremely valuable items in these scenarios. Thresholds will use conditional formatting to highlight specific data points in a chart based on predefined criteria.The qualifications are attribute or metric qualifications. If the expression of a qualification evaluates to TRUE, the report indicates the threshold. Markers can also be included in thresholds. **Note:** We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold, the editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

Apply all the inputs and click on ‘Apply’ button. We can use pattern fill in thresholds, certain part of the chart can be filled with a pattern.

## Axes You can do both Category and Value formattings, by using Title, Label, Axis line and other options in the property editor.

Example of text formatting and color formatting for labels, title and axis line in the column chart.

### Category Axes Label Styling: For Column and Bar charts, an option is available to add markers to the category labels. This feature allows users to apply the required styling—such as changing colors and adding markers—to customize the appearance of the labels.. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FOineCaerbZ4V9wWJBx5d%252Funknown.png%3Falt%3Dmedia%26token%3Db5a633a3-bd45-433f-aca3-3d13722ea6bb\&width=768\&dpr=3\&quality=100\&sign=db0def8e\&sv=2)
## Data Labels A new property is introduced in bar and column charts to show the data labels outside the bar/column. The option to enable this feature is added in data labels tab with ‘**Show Label Outside Bar/Column**’ checkbox. See the screenshot below:

By default, this option will be enabled for the charts created . Below screenshot shows how the data labels look before and after enabling ‘Show Label Outside Bar/Column’ option

The feature ‘Show Label Outside Bar/Column’ is tied to horizontal data label positions. If the data label is set to appear outside the bar/column, the horizontal data label positions right, left, and centre have no effect on the chart. In Vitara Chart a new property called ‘Force Outlier Labels Outside’ is added to all charts with bars as series. The data labels will be forced to appear outside the bar if this property is set, even if the bar has the maximum value in the chart. See the before and after screenshots for the bar chart. ### Before:

### After:

## Series We can turn the bar/column chart into the combinational chart by changing the ‘series type’ in the ‘series’ tab.

This charts have the Pattern fill option (Grid/Square/Double Square/Slash) in the Series tab, which allows us to display data in a more presentable manner.

## **Addition of Data Markers through Links** We have added a new feature that allows us to add markers to bar and column charts using image addresses (links). This functionality can be enabled under the series tab with name ‘Set DataMarker (link),’ where we must enter the URL and press the Apply button.

## Markers The markers in bar/column charts provide a visual means to highlight specific data points, such as outliers, goals, or key milestones. They enhance data interpretation and focus, making important information easily noticeable amidst the bars, aiding in decision-making and emphasizing critical aspects of the data. Open the property editor by clicking on the ‘Edit’ button and select the Series tab you can see the Enable marker, Marker type and Marker size options to Enable marker properties. Below are the screenshots with the marker options.

In the below example, the bar changed to line in series property and ‘Thumbs-up’ marker is applied for the ‘2015 Q2’ attribute element. Below is the screenshot with the marker applied in the chart.

## Column/Bar Property In Vitara charts, there is a new property named ‘Column’ in column chart and ‘Bar’ in bar chart. You can see properties like Overlay Bar/Column, Bar/Column width, Bar/Column spacing and Series Border Properties. Bar/Column width features refer to the ability to adjust the thickness or width of individual bars within the chart. This customization allows you to control the visual representation of data, emphasizing specific aspects or accommodating different data densities for improved clarity and aesthetics in the chart. Bar/column spacing features in bar/column charts allow you to control the gaps between individual bars or columns. Adjusting spacing can enhance chart readability and aesthetics, making it easier to compare data points, emphasize differences, or convey specific data relationships within the same chart. Series border properties in a bar/column chart allow you to customize the appearance of the borders or outlines around individual data series. These properties include options to control the color, width, and radius of the borders for each series within the chart. Customizing series borders can help highlight specific data series, improve chart readability, and enhance the overall visual presentation of the data. This customization is particularly useful when you want to emphasize certain data or create a distinct visual effect in the chart Below is the screenshot of the Bar/Column property editor

Vitara charts, there are two enhancements to the Bar/Column chart. ### **1. Variwide Chart:** Variwide chart can be used to visualize a second dimension in a column chart. Each data point is given a weight, in addition to its value, determining the width of the column. It computes the width for the stack to fill the whole plot area, and simply lets the column widths reflect a value. For more details about the Variwide feature please refer to [*vari\_wide*](/readme/variwide-chart). ### **2. Polar Mode** In polar mode, the Bar/Column charts will use a radial value axis. This way of using axes is called Polar coordinate system.\ Let’s see how to use polar coordinates in simple steps.\ **Step 1:**\ Create a Bar chart with a minimum of one attribute and one metric. See the sample screenshot below.

**Step 2:**\ Open the property editor and go to the ‘Bar’ tab. Enable the checkbox ‘Enable Polar Mode’. See the screenshot.

Then the value axis of the chart will be converted into Polar coordinates. Below screenshot shows the default behaviour of the chart with Polar coordinates.

## **Vertical Polar Mode** We have included support for the ‘Column’ chart, which displays vertical columns on the polar setting when polar mode is enabled. Vertical polar mode in a column chart merges the vertical layout of columns with the radial arrangement of polar charts. This offers a unique way to visualize data, especially for cyclic or circular patterns. By utilizing both vertical and radial axes, it can effectively reveal relationships and trends that might be challenging to grasp using traditional chart types. This technique enhances data exploration and communication in specific datasets where circular data distribution plays a significant role. Below are the steps to enable it. Go to the column tab in the property editor and turn on polar mode to observe that the columns are now vertically aligned in polar mode. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fbs5aX3pwdddOGVwygywK%252FpolarC1.png%3Falt%3Dmedia%26token%3D338956d1-c63c-481c-aa8d-713698a08141\&width=768\&dpr=3\&quality=100\&sign=e91625cd\&sv=2)

## **Polar Mode settings** Polar mode comes up four settings which include Start angle, end angle, Outer Pane Size, Inner Pane Size.\ The default settings of Polar mode are\ Start Angle: 90, End Angle: 360, Outer Pane Size: 85, Inner Pane Size:20.\ We can modify these settings anytime according to our preference. Let’s see some of the settings below\ Start angle : 180\ End angle : 90\ Outer Pane Size : 90\ Inner Pane Size : 20\ Then chart looks like the below screenshot

All the axes settings available for normal Bar chart are also applicable to Polar coordinate system ## Variances In VitaraCharts, ‘Variance/Delta’ feature is added in Bar/Column charts just like in IBCS charts. Variance in bar/column chart features allows you to display the difference or deviation between data points and a predefined reference value. It can be presented as error bars or as a separate series of bars/columns, emphasizing how data points vary from a baseline. This feature helps highlight discrepancies or fluctuations in the data, making it easier to identify trends, outliers, or areas of interest within the chart. To use this feature, the chart should be created with at least 2 metrics and an attribute.The options to enable this feature are available in the Bar/Column tab of the property editor. See the screenshot below

We have ‘Absolute variance’ and ‘Relative variance’ of which either one of them or both can be enabled at a time according to the requirement.\ Absolute variance in bar/column chart features represents the actual difference between data points and a fixed reference value, often displayed as error bars. It quantifies the specific variation from a baseline. Relative variance, on the other hand, expresses the variance as a percentage or ratio, indicating how much a data point deviates from the reference value in relative terms. It provides a standardized measure of variation, allowing for easy comparison across different data sets or contexts. To enable Absolute Variance, enable ‘Absolute Variance’ checkbox in Bar tab of the property editor. We can also set a title for absolute variance graph\ See the screenshot below:

To enable Relative Variance, enable ‘Relative Variance’ checkbox in the Bar tab of the property editor. We can also set a title for relative variance graph\ See the screenshot below:

We can also enable both the absolute and relative variances at once. And the chart looks like in the below screenshot:

## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [*play-by*](/readme/play-animation). ## Background Image The steps to set a background image for all Vitara charts are explained in [*backgroundImage*](/readme/background-images). ## Small Multiples Bar/Column chart supports small multiples feature. Small multiples feature is explained in [*smallMultiples*](/readme/small-multiples). ## Data Markers The data markers feature is introduced in the Bar/Column charts. To know about **Data Markers** feature please [click Here](https://tsdocs.vitaracharts.com/readme/data-markers). ### Tooltip To Know more about the Tooltip Customization feature, please [click here.](https://tsdocs.vitaracharts.com/readme/tooltip-customization) ## Bar Fill The Bar Chart can now show fill percentage, where the fill is displayed as a percentage of the attribute and the remaining space is left empty.The fill properties feature plays a crucial role in enhancing the visual representation of data and conveying information effectively. Unfilled Color: The most fundamental fill property, color choice can influence the overall look and readability of the chart. Different colors can be used to represent different categories, data series, or to highlight specific data points. Transparency/Opacity: Adjusting the transparency of the fill can help highlight specific data points or show overlapping data more clearly. This is valuable when dealing with complex data sets or when you want to emphasize certain information. We can enable this feature by going to the Bar tab.

We can set the Max value for ‘Auto’ or ‘Fixed’ or the metrics you’ve taken.

We can specify a value for ‘Fixed.’

Once the maximum value is set, we can also add an unfilled color.

Here is a screenshot of a bar fill using a percentage dataset.

## Delta Bar Delta Bar/Column feature added to chart, which can be enabled by selecting options from the series tab for individual series. The delta bar feature in a bar chart is a visual element used to represent the difference or change between two data points or categories. It typically consists of vertical bars or lines that connect two bars, highlighting the variance between them. This feature is useful for emphasizing trends, comparisons, or deviations in data, making it easier for viewers to understand shifts or developments over time. Delta bars can be color-coded to indicate positive or negative changes, aiding in the interpretation of data and enabling quick insights into the data’s dynamics. **Note** : DeltaBar has been disabled for Bar Fill, Polarmode, Dynamic width, Overlay, IBCS view & Play-Axis, and color by. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fcqvms35zIbKf49w5xMtM%252FBar_delta.png%3Falt%3Dmedia%26token%3De8ab577e-416f-4494-b01a-5897a1ab34ac\&width=768\&dpr=4\&quality=100\&sign=7a879ed5\&sv=2) * There are also options to enable delta Labels, set delta Bar width, and invert delta Bar colors. The image below shows how the Profit of the financial years 2020 and 2021 will be compared, showing both negative and positive deltas.

* This feature is also available with small multiples and bar variance properties. **Note :** The delta Bar feature completely disables **error bars** and vice versa. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FsZxhEWrl49NdVkusXB1M%252FBar_error_bars.png%3Falt%3Dmedia%26token%3D6ed5d4d4-a3bf-4f30-aa7f-0838be4c8643\&width=768\&dpr=4\&quality=100\&sign=a4197fe3\&sv=2) ## **Secondary Delta Feature** Users of the bar chart can now use the Secondary delta function . The secondary delta feature in a bar chart is utilized to highlight the variance or change between two related data points, often presenting the difference as a separate set of bars alongside the main bars. This allows viewers to quickly discern how much value has shifted between categories or time periods. This feature aids in comparing and contrasting data points, emphasizing growth or decline in a clear and concise manner. It’s especially helpful when you want to visually emphasize changes in data and provide a straightforward representation of the differences between two sets of values. To use this function, go to the IBCS tab in the editor property and enable the Secondary Delta feature.

## Gradient Color Gradient color fill can be added where the series property is available. The gradient color feature in a bar or column chart is employed to enhance data visualization by applying a color gradient to the bars or columns. It serves multiple purposes, such as highlighting data variations, emphasizing trends, or indicating values. By transitioning colors from lighter to darker shades, it conveys a sense of magnitude, making it easier for viewers to perceive relative differences within the chart. This feature can be particularly useful when showcasing data with a wide range of values, as it provides a more intuitive and visually appealing representation, aiding in data analysis and communication. It can be enabled by selecting options from the series tab for individual series.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

## Zero Value Bar We included a new feature that allows users to show zero value bars. The zero-value bar feature in a bar or column chart is a valuable visual feature for representing data that includes zero values. It ensures that even when there is no data for a particular category or period, a visible and proportional bar is displayed at zero. This is crucial for maintaining the scale and context of the chart, preventing misinterpretation or distortion of data. It allows viewers to accurately assess the absence of data and makes the chart more informative and reliable for analysis and decision-making.This feature can be enabled under the “Bar” tabs, where it can be used to display metrics, whose values are zero.

## Series based Tooltip and Datalabels The “Series-based Tooltip” and “Data Labels” features enhance chart data display. When you hover over a data series, series-based tooltips appear, revealing insights into individual data points. Data Labels, on the other hand, allow you to directly display data values on chart elements, which improves data comprehension. These characteristics are useful for expressing precise information and promoting a deeper comprehension of plotted data, making charts more informative and user-friendly. This feature will be accessible from the “Series” tab in the chart editor menu. Users can access this tab when editing a bar/column chart. Within the “Series” tab, under the metrics two new option named “Data label and Tooltip “ is added, accompanied by a dropdown menu that allows users to select the desired formatting , by default it will be none.

## Show Aggregate and Show Top Categories In order to enhance the functionality and analytical capabilities of our charting tool, we moved the “Show Aggregate” and “Show Top Categories” features to the bar/column tab from IBCS tab in editor menu. It aims to provide users with the ability to visualize aggregate values (such as sum or average) of data directly within the bar/column chart without IBCS mode (though it, still, can be used in IBCS mode from these options). Also we have added an option to turn on and off “the aggregate value” for each series in the series tab of editor menu.The “Show Aggregate” feature allows users to enable the display of aggregate values on the bar/column charts. The “Show Top Categories” feature allows users to enable the display of top values on the bar/column charts. The “Show Aggregate” feature will be accessible from the “Series” tab in the chart editor menu. Users can access this tab when editing a bar/column chart. Within the “Series” tab, a new option named “Show Aggregate” will be added, accompanied by a dropdown menu that allows users to select the desired aggregate function (e.g., sum, average), by default it will be none.

### Show Top Categories

## Removing Spaces between Columns Removing spaces between columns in a chart is feasible through adjusting the “gap width” or “distance” parameter. By adjusting this feature, one can create a more compact visual representation with a seamless alignment of columns , allowing for a clearer and more impactful presentation of the data. This option is available in the property editor under the ‘Columns’ tab and is titled Bar/Column Spacing.

In the screenshot below, the spacing of columns is clearly visible in the before and after shots, however in the after image, the spacing is adjusted to ‘0’ among the columns.

## Adding Grid lines over Columns/Bars We have introdcued a new feature of adding grid lines over bar/column ,stacked bar/column chart,this feature enhances clarity by aligning gridlines with the bars, aiding in precise data interpretation. Adjust the gridline appearance to suit preferences. By overlaying gridlines over the bars in polar mode, it facilitates a clearer representation of data and assists in analysis within the circular chart structure. You may enable this functionality in the property editor by going to the ‘Axes’ tab, then ‘Value Axis’ under the ‘Other’ option and checking the ‘Show Grid Lines over Bar’ checkbox.

# Bubble Chart A Bubble chart is a type of chart that displays three dimensions of data. The size of the bubble, the color of the bubble and the location can all be used to represent information in an intuitive manner. ## Inputs Three metrics are necessary. The first metric M1 is utilized for the X-axis, the second for the Y-axis, and the third for determining the size of the bubble. The bubble chart can also be used as a scatter chart because the size of the bubbles does not change. We simply require two measures in this situation, M1 and M2. Attributes - To define the context for the metric data, one or more attributes are necessary. Revenue (M1), Profit (M2), and Profit Margin (M3) are plotted across Month in the example below.

## Bubble Size In Bubble chart to specify the minimum and maximum bubble sizes proportional to the metric values. The bubble size feature assigns varying bubble sizes to represent a third data dimension. Larger bubbles signify higher values, enabling the chart to display three data attributes at once. This enhances data visualization, aiding in the analysis of multi-dimensional datasets, and identifying trends and correlations effectively. This is added in the bubble tab of the property editor.\ The default minimum and maximum bubble sizes are ‘4’ and ‘40’ respectively. See the screenshot

Now lets change the bubble sizes and below is the screenshot that shows how bubbles scale according to the sizes specified.

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria. The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. Hover the cursor over the chart to apply thresholds in Vitara charts. ‘Edit’ button will appear on Vitara chart. This “Edit” button will cause the properties window to appear. To open the threshold editor, select the thresholds tab. You have the option to add a new threshold, remove an existing threshold, or change an existing threshold in the window. **Note:** We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. When the bubble chart is working as a scatter chart, thresholds can also set the type of marker to display when the condition is true. In the below screenshot a threshold with markers is set on profit with a condition less than 200K.

We can use pattern fill in thresholds (Grid/Square/Double Square/Slash), certain part of the chart can be filled with a pattern. The pattern fill feature in a bubble chart employs different patterns or textures within the bubbles to represent additional categorical data. This visual element enhances the chart’s clarity by distinguishing between various groups or subcategories within the dataset. It helps users identify patterns and relationships in complex datasets more easily.

### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by](https://tsdocs.vitaracharts.com/readme/play-animation). We’ve included the option to switch on Transition lines between the trail and current sequences in the bubble chart. The transition line feature in a bubble chart is a connecting line that visually represents the flow or progression of data between bubbles over time or within a process. This feature aids in understanding the sequence or relationships between data points, making it useful for depicting dynamic data, trends, or changes within a series of events or categories. It enhances the chart’s storytelling capabilities and helps users interpret data more effectively. For a specific category axis attribute element, a line will be created between the play axis elements (current play axis value versus first play element OR current play axis value against last but one play axis value). To see the lines, enable the “Show Transition Lines” option in the play axis menu and set the “Retain Points” to ‘First’ or ‘Last but One’. Please see the screenshots below.

## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage.](https://tsdocs.vitaracharts.com/readme/background-images) ## Small Multiples Bubble chart supports small multiples feature. Small multiples feature is explained in [smallMultiples](https://tsdocs.vitaracharts.com/readme/small-multiples) ## Series The series property in a bubble chart allows you to group and categorize data points into distinct series or data sets. Each series typically has its own color, marker, and series pattern, making it easier to distinguish and analyze various subsets of data within the same chart. This property is particularly useful when you want to compare and contrast different categories, helping users to identify patterns and trends within each series. Bubble chart now has an ability to individually set markers,color pattern from the addition of the new series property on the property editor.

Users now have the ability to pick colors for the specific series.

And can add marker of the desired choice.

Series pattern can also be applied to the marker.

## Marker Type We have intrdocued a new feature in a bubble chart, the “marker type” feature refers to the shape or symbol used to represent individual data points. By customizing marker types, you can add an extra layer of information to the chart, visually distinguishing different categories or data series. This enhances clarity and comprehension in multi-dimensional data visualizations. This feature will be accessible from the “Bubble” tab in the chart editor menu. Users can access this tab when adding a new marker type with the size required in a bubble chart. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FqsUlCvPGT9kpeKAvIv4V%252Funknown.png%3Falt%3Dmedia%26token%3Dbe527a05-28b7-4fe5-9ede-54d9948d32ba\&width=300\&dpr=3\&quality=100\&sign=5dbc1510\&sv=2)

## Plot line We have the “plot line” feature in a bubble chart is used to show lines that are either vertical or horizontal or other directions as well and act as reference points. In addition to helping with data visualization and comparison, these lines can represent thresholds, averages, or other data points. This allows users to evaluate how individual data points relate to particular standards or values. Plotline orientation will be displayed in both horizontal and vertical directions (exclusive to bubble charts) especially 45 degrees. When you click on the slope option in the property editor’s plotline orientation dropdown, the other dropdown will be disabled and the input text will appear. You must enter a slope value between the chart’s maximum value (e.g., 0.1, 0.2, etc.) based on the chart’s values. The chart editor menu’s “Plot line” tab will provide access to this capability. When adding slope, horizontal or vertical orientation to the bubble chart’s plot line, users can access this tab. The ‘Source’ and ‘Target condition’ become constrained when we add orientation directly as ‘Slope’ under the “Plot line” tab.

# Bullet Chart Stephen Few created a bar graph version called a bullet chart. The bullet graph is used as a replacement for dashboard gauges and meters, and it appears to be inspired by the conventional thermometer charts and progress bars present on many dashboards. Since gauges and meter usually display too little information, take up too much space, and are overloaded with unnecessary and distracting accessory, bullet graphs were created to solve these problems. The bullet graph displays a single, major metric (such as total revenue for the current financial year) and compares it with one or more other measurements to clarify its meaning (such as in comparison to a target). ## Inputs Metrics- At Least 2 metrics are required for this visualization to be meaningful. A base Metric M1, a target M2. Additional target metrics M3, M4, etc can be added as shown below. Attributes - 1 or more attributes can be included.

## Plot Bands- Bullet The plot band feature in a bullet chart is used to highlight specific ranges of data within the chart. It consists of colored bands that can be placed at predefined intervals along the chart’s axis. This helps users quickly identify whether data points fall within or outside desired target ranges, making bullet charts effective for assessing performance or progress towards goals in a visually informative manner. Bullet chart plot bands can be defined based on metric aggregations, similar to bullet chart type in Vitara Micro Chart. By default, the bullet chart will plot bands based on ‘percentile’ function on the metric applied in the ‘Bar’ drop zone. We can edit these default bands and can apply different aggregation functions for different bands. As shown in the below screenshot hover the cursor on the chart, click on the ‘Edit’ button to get a properties popup window.

By default, all bands are plotted based on the ‘percentile’ value of the metric. We can also make the bands plot using fixed values. In the property editor, go to bullet tab and select ‘Fixed Value’ from the Metric dropdown. Set some value in the ‘Fixed Value’ textbox. Repeat this process for whichever bands should have the ‘fixed value’. See the screenshot below.

And the bands should look like this:

## Customization of bands We’ve included new features for band customization under the Bullets property option, allowing us to add more than four bands.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. ### **Attribute Threshold** The Source and Target drop-down lists in the Threshold Editor window display all the attributes and metrics available in the chart. Users can select an attribute as the source and a metric as the target, and then define a threshold condition. The following conditions are available for attributes: Equal To, Not Equal To, Contains, Not Contains, Starts With, Not Starts With, Ends With, and Not Ends With. These conditions can be applied to define the required threshold logic. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FmtW6ZxT3r6BxJImjvOoX%252Funknown.png%3Falt%3Dmedia%26token%3D4cf69fbf-523f-4f50-b09a-51ffdfc0ee8e\&width=300\&dpr=3\&quality=100\&sign=156cac5\&sv=2) ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by.](https://tsdocs.vitaracharts.com/readme/play-animation) ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](https://tsdocs.vitaracharts.com/readme/background-images). ## Zero Value Bar We included a new feature that allows users to show zero value bars. The zero value bar feature in a bullet chart ensures that even when there is no data for a particular category or period, a visible and proportional bar is displayed at zero. This maintains the chart’s scale and context, preventing misinterpretation or distortion of data. It allows viewers to accurately assess the absence of data and makes the chart more informative and reliable for analyzing performance against goals or benchmarks, aiding in decision-making and performance assessment in areas where zero values may occur. This feature can be enabled under the “Bullet” tabs, where it can be used to display metrics, whose values are zero.

# Column Range Chart The Column Range visualization in Vitara Charts can be used to illustrate minimum and maximum values over time or to indicate the acceptable range of deviation for a certain category. It can also be used to show the start and finish dates of a project timeline. This style is also suitable for non-aggregable metric representations such as stock on hand at various times. ## Inputs Attributes: Level 1 attribute is required and optionally level 2 attributes can also be added. These attributes are used on the x-axis. Metric: 2 Metrics, start value M1 and End Value M2 will need to be provided. Metrics are used on the Y-axis.

## Column range chart now supports date attributes (for start and end values) A new feature is added where all the elements in a group can be shown in a single row and to enable this feature, we need to have a color by attribute in the chart. In the appearance property tab, enable the Overlay Bar/Column option, you can see the elements in single row.

Column range chart now supports the date attributes in start and end value dropzones. Below are the examples where All Category levels are shown with start dates and end dates in the chart. In the below screenshot, the start date and end date values are shown within an year.

In the below screenshot, the start date and end date values are shown within an month.

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. **Note:** We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

Apply all the inputs then click on ‘Apply’ button. ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Displaying stacking bars in a separate row We can also display bars stacked in different rows when using an attribute in the “Color by” drop zone for each category element. The feature of stacking bars in separate rows within a column range chart is a valuable tool for visualizing complex data relationships. In this type of chart, each category or data series is represented as a separate row, and within each row, bars of varying heights are stacked to show the range of values within that category or series. This approach offers several advantages. Firstly, it allows for easy comparison of the total range between categories. Secondly, it provides a clear view of how individual data points contribute to the overall range, aiding in data analysis. As an illustration, we made a mock chart and added a number of categories to the Category axis along with subcategories (such as horror, fans, and so forth) to the Color by drop zone.

## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by.](https://tsdocs.vitaracharts.com/readme/play-animation) ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage.](https://tsdocs.vitaracharts.com/readme/background-images) ## Zero Value Bar We included a new feature that allows users to show zero value bars. The zero-value bar feature in a column range chart is a crucial tool for accurately representing data where values can be zero or very close to zero. It ensures that data points with zero values are visibly displayed, preventing them from being overlooked or misrepresented. In this type of chart, a bar is drawn even when the data point has a value of zero, helping viewers understand the absence of data or the true distribution of values more precisely. This feature can be enabled under the “ColumnRange” tabs, where it can be used to display metrics, whose values are zero.

# Combination Chart You can create a combination chart to represent multiple series as different chart types. For instance, a chart showing sales and profit can be created with sales shown as bars and profit shown as a line or area chart. In addition each of these metrics can use their own axis. ## Inputs Metrics - 1 or more metrics\ Attributes - 1 or more attributes
### Series ‘Scatter’ is removed from series types. It is now replaced by data markers. And also width property is added in series tab to independently adjust the width of each series. See the screenshot below

## Steps to create a Combination chart Combination chart can be created using the series tab in property editor of Line/Bar/Column/Area charts ### **Step 1:** Create a column chart for example with 2 metrics profit and revenue as shown in the screenshot below.

### **Step 2:** Now open the property editor and go to the series tab. Click on the edit button for revenue metric as shown in the screenshot below\

### **Step 3:** Select the series type for revenue metric as ‘Line’, width as ‘2’ and click on apply as shown in the below screenshot ![](/files/o9Y58n4nQamt4WW6VVPP) And the combination chart will now be created as shown in the screenshot below.\

### **Step 4:** We can also set the series to be on the secondary axis for one of the metric. See the screenshot ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fs83ziKQzM1T0A8XRvLmR%252Funknown.png%3Falt%3Dmedia%26token%3D00314acc-d407-4b44-aae6-d1dee3623007\&width=300\&dpr=3\&quality=100\&sign=38257b1b\&sv=2) And below screenshot shows how the chart looks after enabling the series on secondary axis

## Data Markers The data markers feature is introduced in the Bar/Column/Line/Area/Sparkline charts. To know about **Data Markers** feature please click [*Here*](/readme/data-markers). # Dumbbell Chart A dumbbell chart is a data visualization tool that displays the comparison of two data points or values. It consists of two distinct points (represented as circles or dots) connected by a line. One point represents the starting value, while the other represents the ending value. This chart is useful for illustrating changes or differences between two data sets, making it easy to visualize trends, comparisons, or progress over time, such as before-and-after scenarios or performance comparisons between two entities.The chart can also show the difference between the two data points in the form of a percentage. ## Inputs Metrics: 2 metrics re required Attributes: 1 attribute.

## Data labels We can modify the data labels format for the data labels and variation also. You can see the attached screenshots below.

## **Labels inside the Marker** We can now display data labels inside the marker . Labels inside markers in a dumbbell chart improve data comprehension and context. The objective of the chart is clarified by inserting labels within markers, which generally reflect the chart’s initial and final values. This approach allows for the instant identification of data points, allowing viewers to directly compare numbers and understand changes. Labels provide additional information, such as background or explanations, that helps to clarify the relevance of the data being displayed. This method saves space and reduces visual clutter because labels are confined within markers. This functionality can be enabled by going to the editor’s data labels property and checking the “Label inside the marker” check box.

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. We can use pattern fill in thresholds (Grid/Square/Double Square/Slash), certain part of the chart can be filled with a pattern. It’s the ability to fill the area between the two data points (typically represented as circles or dots) with patterns or textures instead of solid colors. This feature adds a visual element to the chart, making it easier to distinguish and emphasize the difference or change between the two data values. Pattern fills can include grid,square,double square and slash pattern, providing additional context and enhancing the chart’s clarity, especially when dealing with complex or overlapping data points.

### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ### Dumbbell Users can customize the start value marker and the end value marker by modifying the marker type and size. In addition, they can tailor the line appearance by adjusting the line style, width, and color. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fi9UjibnTnSTQNpbuvH0M%252Funknown.png%3Falt%3Dmedia%26token%3De43b22b4-def8-470a-9bfb-a74f31e3d351\&width=768\&dpr=3\&quality=100\&sign=513ca5ca\&sv=2) ## Background Image The steps to set a background image for all Vitara charts are explained in [*backgroundImage*](/readme/background-images). ## Small Multiples Dumbbell chart supports small multiples feature. Small multiples feature is explained in [*smallMultiples*](/readme/small-multiples)*.* # Funnel Chart A funnel chart is a data visualization tool commonly used for displaying stages in a process or a sales pipeline. It resembles an inverted pyramid, with each segment representing a stage or category, and the width of each segment corresponds to the quantity or percentage of data it represents. Funnel charts are particularly useful for illustrating the progressive reduction or conversion of data from one stage to the next. Funnel charts enable analysts to see the percentage contribution of metric data in a dimension. For example, the funnel chart below shows the percentage contribution of Profit by Category. Each area of the funnel represents a separate category, and the size of each section is proportionate to the amount of profit contributed by the category. ## Inputs Metrics - 1 or more metrics Attributes - 1 attributes

### Multi-Metric Analysis Starting with version 5.3.5, the Funnel chart supports simultaneous analysis of multiple metrics without requiring an attribute. This enhancement streamlines data evaluation, providing businesses with comprehensive insights from multiple metrics within a single view.

Using the Vitara grid chart it’s so easy to apply the following options. ## Grouping We can apply to the group, both at column level and row level. Expand/collapse grouping. For group headlines, we can apply aggregations. Further, we can show grand totals for grouped metric aggregated headlines. ## Aggregations We can show aggregations (Subtotals) on groupings. Enable or disable grand totals. ## Thresholds Apply/remove thresholds easily. In thresholds, we can set the background color, text color, icons, icon color, icon size, icon only and use custom images as icons. ## Sorting The column data can be sorted in either ascending or descending order with only one click on the column header. Data will be sorted in ascending order on the first click, descending order on the second click, and sorting on a column will be removed on the third click. There is also a “Clear Sorting” tab that will reverse the sorting that has been performed to every grid column. ## Look and feel Auto size fit to the content/ fit to grid width, grid themes, set grid row height, option for clear sorting/clear threshold/clear grouping/clear filter, export grid data into CSV format, pin a column to the right/left side. Text font properties like font style, font size, alignment, text color, bold, underline and italic are available for column headers and body text. ## Filters View filters can be created specifically to the grid i.e filter on attribute or metric. ## Show/hide the number of children in a row group: Grid has the ability to show or hide the number of children in a row group. The number of children in a row group can be shown or hidden in grid charts. Click the ‘Edit’ button, then select ‘Grid Theme’ and check the ‘Hide Children Count’ checkbox in the properties popup window.

# KPI Animation Chart Gauges are often used in business to show critical measurements. They typically display a single essential performance metric and are prominently displayed on the dashboard. Custom gauges in VitaraCharts include animated views to increase aesthetics while also drawing the user’s attention to the KPI. ## Inputs Metrics - 2 metrics required. Metric 1, M1 will be the numerator and Metric 2 M2 will be the denominator making the displayed value as M1/M2 as a percentage. Attribute - Optional The screenshot below displays the Profit Margin as a percentage value. The default color shown is blue on a white background but can be altered as desired for gauge or background.

In Vitara charts, the text formattings for the KPI animation chart are introduced. We can now format the text and change the vertical alignment of the text. Below is the example, where the alignment is ‘Top’ and some text formattings are done.

## Thresholds Based on the ratio of the two metrics we can apply thresholds on ring, wave or on the background of the chart. Hover the cursor on the chart, Click on the ‘Edit’ button and select the ‘Thresholds’ option in the properties window. Open the property editor by clicking on the ‘Edit’ button and select the ‘Threshold’ tab.

The target thresholds can be applied on source metrics too. Only the ‘Ratio’ option is available in Source threshold, now the metrics can also be sourced. Below is the example where the Target selected as ‘Wave’ and Source as ‘Profit’ and applied threshold condition as Greater than >20.

We can compare 2 metrics M1 and M2, like, how much percentage contribution of M1 in M2. For example, if I want to show, what is the percentage of profit out of total revenue generated?

### Data Labels: Display formats are available under the Label Format properties, as shown in the reference screenshot below. To apply formatting, the required formats can be added as macros in the Format section and the desired styling can then be applied. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FGcVzZSewLUjl6ukPYQqf%252Funknown.png%3Falt%3Dmedia%26token%3D41bca0d0-8219-4971-8d0b-38a8d437eff4\&width=300\&dpr=3\&quality=100\&sign=500b9a6d\&sv=2) ## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. **Note:** we can also apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition.

Below is the example of the threshold applied on the KPI Ring chart.

Formattings such as Ring thickness, Start and End angles will be applied in common to all rings, whereas unfilled color applies separately for each ring. Below is the screenshot of a KPI Ring chart with ring thickness, start and end angle formattings applied.\ Thickness - 15\ Start Angle - 300\ End Angle - 240

Below is the screenshot of a KPI Ring chart with unfilled color applied as “red” for all rings.

## Reference line to a KPI Adding a reference line to a KPI (Key Performance Indicator) ring chart involves including a horizontal or vertical line representing a target or benchmark value. This helps users easily compare actual KPI values against the desired or expected level, providing a visual gauge of performance and aiding in decision-making and goal assessment. The plot option has been introduced to the ‘Kpi’ property in the editor panel . After clicking on it, it will display the default line as per the series(Ring) max value, for user has been given input text which will have range from 0 - 100 as a percent value, user may define value in it so line will appear as a user value, and user can also apply color on it.

# Line/Area line Chart A line chart is a graphical representation that uses lines to connect data points, making it ideal for displaying trends over time or continuous data. It is commonly used in data analysis and presentations to visualize changes, patterns, or relationships in data. By plotting points on a grid with a horizontal x-axis (usually representing time or categories) and a vertical y-axis (representing values), line charts provide a clear and concise way to interpret data trends, making them valuable tools in various fields, including finance, science, and business analytics. ## Inputs Metrics - 1 or more metrics can be used Attributes - 1 or more attributes can be used.

## Markers Marker properties have been moved to Series properties in Vitara charts . The modified marker characteristics are used by all charts that support Series as Line/Area. Markers in line/area charts are symbols or shapes placed at data points along the plotted lines. They enhance data visualization by emphasizing specific points, aiding clarity in dense datasets, and enabling data validation. Markers are invaluable for pinpointing exact values and identifying trends, especially when lines overlap. Customizable marker styles and sizes allow users to optimize chart aesthetics and readability. Overall, markers serve as visual aids, enhancing the effectiveness of line/area charts in conveying data trends and patterns to audiences. By selecting the Series tab and clicking the ‘Edit’ button, you can see the Enable marker, Marker type, and Marker size options to Enable marker properties. There are numerous markers to choose from. Navigate to the marker tab, choose the marker type, and then select the marker. The size of the markings can also be changed. Simply enter a number in the ‘Marker Size’ text input box, or utilise the increase/decrease buttons.

In the below example, the line changed to area in series property and ‘Rocket’ marker is applied for the 2015 attribute element. Below is the screenshot with marker applied in the chart.

## Series We can turn the line/area chart into the combinational chart by changing the ‘series type’ in the ‘series’ tab.

## **Pattern Fill** Pattern fill in line and area charts employs various designs to fill the space under or within data lines or areas, enhancing visual differentiation between multiple datasets. This aids in data interpretation, particularly when colors aren’t sufficient or when lines overlap.Additionally, they add aesthetic variety to charts, making them more engaging, and can be strategically employed to highlight specific data points or time periods, adding depth and clarity to data presentations. This charts have the Pattern fill option (Grid/Square/Double Square/Slash) in the Series tab, which allows us to display data in a more presentable manner.

## Line chart Line chart - line type options like dashed line, dotted line. In Vitara charts, the line options are introduced in Line, Area and Sparkline charts. Line width, Line style and Line Color are the 3 options introduced. Below are the screenshots with the line options. Line Width: Adjusting line thickness or width helps in controlling the prominence of the lines, making them more or less prominent based on your preference or the importance of the data. Line Style: Line options allow you to choose different line styles such as solid, dashed, or dotted lines. This helps distinguish between multiple data series or highlight specific lines for emphasis. Line Color: You can customize the color of each line, enabling clear differentiation between various data series. This is especially valuable when dealing with charts containing multiple lines. Line width - 2 Line width - Blue Line style - ShortDashDot

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## **Pattern fill in Threshold** We can use pattern fill in thresholds, certain part of the chart can be filled with a pattern. Pattern fill in the threshold feature of a line or area chart is employed to emphasize critical zones where data surpasses preset limits. It’s especially valuable for highlighting when, where, and how data exceeds or falls below specific thresholds, making anomalies or significant deviations instantly noticeable. By applying distinctive patterns to these areas, it aids in pinpointing critical events or conditions, enhancing data interpretation, and guiding decision-making processes in fields such as quality control, financial analysis, and performance monitoring.

## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by](/readme/play-animation). ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](/readme/background-images). ## Small Multiples Line chart supports small multiples feature. Small multiples feature is explained in [smallMultiples](/readme/small-multiples). ## Data Markers The data markers feature is introduced in the Line/Area charts. To know about **Data Markers** feature please [click Here.](https://tsdocs.vitaracharts.com/readme/data-markers) ### Tooltip The ‘Show only on Hover’ option is now available in the Tooltip tab for Line and Area series. [Click here ](https://tsdocs.vitaracharts.com/readme/tooltip-customization)for more information ### Error Bars : For detailed steps on creating Error Bars, [click here](https://tsdocs.vitaracharts.com/readme/error-bars). ## Gradient Color Gradient color fill can be added where the series property is available. The gradient color feature in line and area charts is employed to enhance data visualization. It adds depth and dimension to the chart, making it visually engaging. Gradients smoothly transition colors along lines or within areas, highlighting trends and variations. By changing colors based on data magnitude, it effectively communicates information. For instance, it can use warmer colors for higher values and cooler colors for lower values, helping viewers discern patterns and understand data relationships more intuitively, making it a valuable tool for data presentation and analysis. It can be enabled by selecting options from the ‘Series’ tab for individual series.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

## Series based Tooltip and Datalabels We introduced the “Series-based Tooltip” and “Data Labels” features enhance chart data display. When you hover over a data series, series-based tooltips appear, revealing insights into individual data points. Data Labels, on the other hand, allow you to directly display data values on chart elements, which improves data comprehension. These characteristics are useful for expressing precise information and promoting a deeper comprehension of plotted data, making charts more informative and user-friendly. This feature will be accessible from the “Series” tab in the chart editor menu. Users can access this tab when editing a bar/column chart. Within the “Series” tab, under the metrics two new option named “Data label and Tooltip “ is added, accompanied by a dropdown menu that allows users to select the desired formatting , by default it will be none.In the below screenshots ,I have made changes for the ‘Cost’ series.

# Packed Bubble Chart A packed bubble chart is a data visualization that displays information in a hierarchical, circular format. It uses circles, or “bubbles,” to represent data points. Each bubble’s size represents a data value, and the bubbles are grouped hierarchically, with smaller bubbles nested within larger ones. Packed bubble charts are effective for showing data relationships and hierarchies, allowing users to visualize data clusters and compare values within them. They are often used in data analytics, finance, and project management to depict complex data structures and identify trends and patterns. ## Inputs Metrics: 1 metrics Attributes: 1 attribute. ### **Single Attribute Behavior** When a packed bubble chart uses only one attribute: * The chart displays individual bubbles without any hierarchical grouping. * Bubble sizes are determined solely by the selected metric. **Note:**\ Bubble size is directly proportional to the metric value—larger values result in larger bubbles. ![](/files/LyqWdz4Qo34jmVnx72cl) ### **Hierarchical Grouping** To enable hierarchical grouping in a packed bubble chart, include at least two attributes along with a metric: * Attribute 1: Category * Attribute 2: Subcategory * Metric: Value (e.g., Cost or Profit) **How it works:** * The Category attribute defines the primary (outer) grouping. * The Subcategory attribute is represented as individual bubbles within each Category group. Refer to the screenshot below for an example.

### Ungroup Bubble The Ungroup option removes hierarchical grouping from the chart and displays all bubbles as independent entities. This feature separates grouped bubbles into distinct, unconnected elements, improving clarity and enabling more precise data analysis. **Behavior:** * All bubbles are displayed independently * No grouping structure is applied **Key Benefits**: * Enhances data comparison by eliminating visual overlap * Improves representation of individual data points * Highlights specific data elements more effectively * Allows independent customization of each bubble * Increases overall readability and clarity of complex datasets You can enable or disable the Ungroup option as needed. Refer to the screenshot below for an example where the option is enabled.

### Data Labels Users can customize data labels using the available options under the **Data Labels** section, including text wrapping, label display format, metric format, and other formatting features The default data labels can be modified using custom text and dynamic macros to display relevant data values within the Format section. Refer to the screenshot below for the Data Labels Editor window. [Click here](https://tsdocs.vitaracharts.com/readme/data-label-customization#data-label-customization) for more information. ![](/files/8blbAQND9VkdTX7XwxnN) ## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can use characteristics to impose thresholds. All the measurements and attributes in the chart are listed in the source drop-down box in the threshold editing window. We can choose a source attribute and specify a threshold condition. By default, packed bubble establishes a threshold (Gradient threshold) and bases the colours of the plot on the values of this threshold. The packed bubble chart’s threshold editor is seen in the screenshot below. The chart’s default threshold is displayed by the threshold editor. By selecting the ‘Add’ option, we can modify this threshold, delete it, and add a new one.

## **Bubble Size** We can now choose to manage the bubble’s size using either metric or fixed values. * Metric Value When the bubble size is set to a metric value, the bubble size adjusts from smaller to larger in accordance with the value. * Fixed Value Similarly, when the bubble size is set to fixed, all bubbles, inspite of their values, are adjusted to standard size.

# Pie Chart ### Pie (Donut) Chart A pie chart is a circular data visualization tool used to represent data as a whole or a part-to-whole relationship. It divides the circle into sectors, with each sector’s size proportional to the quantity it represents. These sectors are typically colored differently for clarity. Pie charts are effective for showing the composition of a single entity or a dataset’s distribution, making it easy to understand the relative proportions of various categories or components. They are commonly used in business reports, presentations, and statistics to illustrate percentages, share insights, and communicate data in a visually engaging and accessible manner. The Donut chart is a variant of the Pie chart that can display a single series of data in a two-dimensional circle. It is handy for displaying data as elements of a larger picture. ## Inputs Metrics - 1 metric Attributes - 1 or more attributes. For each combination of attribute elements, one slice will be created. For example in the screenshot below for every combination of Month and Category, a slice is created.

## Data labels We have an option to enable/disable the Show total in Center label in the Pie chart

Styling for the **Data Label**, **Center Label**, and **Metric Label** can be configured using the options available in the **Data Label** tab under the **Format** section. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F1jSwoi8uH7aWSqVBiofS%252Funknown.png%3Falt%3Dmedia%26token%3Dd69010d9-28d0-4cd3-b698-3fc56840211d\&width=300\&dpr=3\&quality=100\&sign=44e0c\&sv=2) To format the Metric Label, first enable the Show Total in Center Label option. After enabling this option, select Metric Label from the Format section and apply the required styling as needed.

We have added the option ‘Show Overlapping Labels’ in the data labels menu.

## Format Pie In Vitara charts, a feature is introduced in pie chart to customize inner radius, start and end angles.\ All these customizable properties are available in the ‘Pie’ tab of the property editor. See the screenshot below.

As you can see in the above screenshot, the outer radius is 100% which cannot be changed. And the default inner radius is 70, default both pie start and end angles are set to 90.\ Now, let us customize the pie chart with some of these settings.\ Inner radius - 10; Pie start angle - 0; Pie end angle - 90.

Inner radius - 0; Pie start angle - 0; Pie end angle - 360. These settings create a full Pie chart.

Inner radius - 40; Pie start angle - 0; Pie end angle - 180.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by](/readme/play-animation). ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](/readme/background-images). ## Small Multiples Pie chart supports small multiples feature. Small multiples feature is explained in [smallMultiples](/readme/small-multiples). ## Gradient Color Gradient color fill can be added where the series property is available. The gradient color feature in a pie chart is used to enhance its visual appeal and depth. Instead of solid colors, it applies a gradual transition of colors to chart segments, typically from the outer edge toward the center of each slice. This creates a 3D-like effect and adds a sense of dimension, making the chart more engaging and visually interesting. Gradient colors can help differentiate segments while maintaining a cohesive color scheme, providing a balance between aesthetics and data representation in presentations and reports. It can be enabled by selecting options from the series tab for individual series.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

#### Pattern Fill We have added pattern fill options that can be enabled under the series tab.

# Polar Charts Some of the charts in VitaraCharts can be converted to Polar charts. Line, Area, Bar, Column, Stacked Bar, and Stacked Column charts are available. Polar charts are also known as radar charts due to their usage of a radial value/category axis. When you convert a chart to a Polar chart, the X-axis becomes a circular/radial axis, and the axis values are shown along the circle. Here are some screenshots of Polar charts.

The procedure to enable polar mode in VitaraCharts is described in chart-specific user guide\ To know how to enable Polar mode in Bar/Column charts, click here.\ To know how to enable Polar mode in Stacked Bar/Column charts, click here. ## Unleash the Power of Polar Mode, Creating Spider Web-Like Visuals Discover the allure of spider web charts by transforming Line, Area, Bar, Column, Stacked Bar, and Stacked Column charts into mesmerizing Polar charts within VitaraCharts. These dynamic visuals, reminiscent of spider webs, add an intriguing dimension to your data analysis. Unlocking the potential of spider web charts with VitaraCharts is a breeze. Follow a few simple steps to effortlessly convert your existing charts into mesmerizing Polar charts. To illustrate, let’s consider the example of transforming an Area chart: ## Enabling Polar Mode: * Navigate to the respective chart’s editor. * Locate the “Area” tab or tabs corresponding to your selected chart type(s), and activate polar mode. * Adjust the “Inner Pane Size” to 1 to control the size of the center circle.

## Grid Line Configuration: * Proceed to the “Axes” settings. * Locate the category axis settings. * From the “Other” dropdown menu, set the grid width to your preferred thickness (e.g., 2).

## Customizing the Value Axis: * Within the same “Axes” settings, find the value axis. * Set the grid line width to your desired thickness (e.g., 2) in the “Other” dropdown menu. * Adjust the “Tick Interval” to align with the range of your dataset. *For example,The tick interval is like the spacing between marks on a ruler. For example, if your data goes from 0 to 100 and you set the tick interval to 10, you’ll see marks every 10 units (0, 10, 20, 30, …, 100). This makes it easier to understand the scale of your data. Adjusting the tick interval based on your data’s range helps keep the chart easy to read.*

## Color Customization (if necessary): * Visit the “Series” settings. * Customize colors if needed using the available options. * Utilize the color option to modify colors according to your preferences. These steps can be applied to Line, Area, Bar, Column, Stacked Bar, and Stacked Column charts in VitaraCharts. # Sankey Chart A Sankey chart is a data visualization tool used to represent the flow or distribution of resources, energy, or values between multiple entities or stages. It consists of interconnected arrows or flow paths, with the width of each path proportional to the quantity it represents. Sankey charts are commonly used in fields like energy management, economics, and process engineering to illustrate the transfer of resources or information, making it easier to understand complex systems, identify inefficiencies, and optimize processes. ## Inputs Metrics: 1 metric Attributes: 2 or more attribute

### Data labels Users can apply styling to the Links and Nodes Label using the options available in the Data Label tab under the Format section. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FfqEkslEaMaT0mVndLYTd%252Funknown.png%3Falt%3Dmedia%26token%3D99751a1e-5679-4e1e-b831-631f57e668a3\&width=300\&dpr=3\&quality=100\&sign=bb35da26\&sv=2) We can enable or disable the node labels and link labels. You can see the attached screenshots below.

We can format the links and nodes accordingly.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

We can set the threshold for either links or nodes. We can also set a threshold at the node or chart level. For example, if we set the threshold to top 1, we can apply the red colour to each node or to the entire chart. After entering all of your information, click the ‘Apply’ button. ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Sankey property Sankey chart have the ability to set custom colors for links. Links can be given custom color palette using their colors options. Here, we select a ‘Caribbean Green Pearl’ color for links.

## Highlight links from end to end We have a new update in Sankey chart of Vitara charts where we can highlight path of the linkages end to end. This makes it much easier to picture. When you hover on a link, you may see the entire relationship of that particular link. Here’s an example of a link highlight from start to finish. The NodeOffset option is to move the nodes vertically and horizontally. The positive value moves it to the right/ bottom and the negative value moves it to the left/top.

## **Node Padding and Node Width** We have introduced a new feature of altering node padding and node width in the Sankey chart. Node padding and node width are important layout factors in Sankey charts that affect chart reading and visual balance. The distance between nodes is defined by node padding, which reduces clutter and prevents overlapping flows. Node width adjusts the size of nodes, balancing the visual aspect of the chart. In a supply chain Sankey chart, for example, bigger nodes could indicate broad categories such as “Manufacturing,” while thinner nodes could detail specific goods or components. This design enables viewers to understand both the overall flow pattern and the specific relationships. Adjusting these settings results in a clean, organized chart with clear flows and correctly sized nodes, allowing for effective data transmission and insight extraction. Navigate to the Sankey tab in the property editor and enter the desired range into the input box to view the output on the chart.

## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage.](https://tsdocs.vitaracharts.com/readme/background-images) ## New data model - Introduced The data in the existing Sankey diagram flows along the columns from source node to target node. The newly proposed structure addresses the shortcomings of the previous structure and provides a more natural representation for directed graphs like Sankey. ## **Difference between the existing model and the new model:** ### **Example 1:** \ There are three attributes in the screenshot below: year, category, and subcategory. The vitara sankey chart will create nodes for each of these attribute items in normal mode.The links will go from Year to Category, and then from Category to Subcategory. ``` Year → Category → Subcategory ```

## **Example 2:** To represent the flow from A to B and B to C, the difference between the existing data model and new data model is as follows:

**Existing Model:**\ Existing model will need three attribute columns to represent the nodes. | Attr1 | Attr2 | Attr3 | Metric | | ----- | ----- | ----- | ------ | | A | B | C | 10 | **New data model:**\ The new data model requires two attribute columns as source and target. The Attr1 should be configured as the source and Att2 should be configured as the target. | Attr1 | Attr2 | Metric | | ----- | ----- | ------ | | A | B | 10 | | B | C | 10 | ## **Configuring Source and Target:** ### **Example 3:** **Shopping flowchart data**\ There are two properties in the screenshot below: Navigation Source and Navigation Target. This data depicts the flow of actions from one point on an online shopping page to the next. In an online buying portal, for example, the user will be at several stages of action until final payment.

In this example, let’s consider the flow of data in one branch as shown below: ``` Online Order → Order Submitted → Payment Verification → Credit approved/Credit Denied/Credit Review/Order Prepaid/Payment Denied/Processing Payment. ```

The Vitara Sankey chart in normal mode is not appropriate for this type of data format, where the linkages commence in one attribute column and end in another. The sankey chart in normal mode is shown below, with linkages drawn from the Navigation Source element to the Navigation Target attribute.

The new data model is helpful for these kinds of data, where the information is presented in rows. By clicking the “Edit” button and expanding the Sankey menu, you can configure the Vitara Sankey to operate in the row data model. There are three drop-down menus in the Configuration attributes section: Source, target, and depth/direction. All of the attributes that are seen in the chart are listed in these drop-down boxes. The appropriate qualities for each drop-down box must be chosen.

We don’t have any attribute components that repeat more than once in the present example, therefore we don’t need to use the third attribute - Depth/Direction. The Depth/Direction option will be discussed more in this document. In the current example, the attribute ‘Navigation Source’ represents the source node and the attribute ‘Navigation Target’ represents the target node.

The Sankey chart will appear in the row data flow model as soon as we choose the source and target properties. The Sankey chart with source and target attributes configured is shown in the screenshot below. In the Sankey chart, we can see the branch that was previously mentioned.\ *Online Order → Order Submitted → Payment Verification → Credit approved/Credit Denied/Credit Review/Order Prepaid/Payment Denied/Processing Payment*

In addition to source and target options Depth/Direction attribute can be used to describe the flow of sankey. Depth can be used to make a node distinct within the flow path. **Configuring Depth/Direction:** **Example 4:** Website navigation data indicating users landing and navigation between different pages in a website.\ In this example there are three attributes - Landing Page, Navigate To, and Level.

We can configure the attribute ‘Landing Page’ as the source of navigation and the attribute ‘Navigate To’ as the destination for the given use case. The limitation of this strategy is that the same transaction occurs on numerous levels. For example, as seen in the below screenshot, ‘Product → Cart’ navigation can happen in level 1,2 and 3.

If we don’t have the level attribute, it will aggregate the row ‘product → cart’. Below are the possible flow paths that use ‘product to cart’ navigation. ``` 1. Home → product, product → cart (Level-2), and cart → to home/shipping. 2. Product → cart (Level-1), cart → shipping, and shipping → order details. 3. Home → department, department → product, product → cart (Level-3). ``` Therefore to identify all these transitions uniquely at different levels, along with source and target attributes we need another attribute which will have information regarding depthness. Below is the screenshot of sankey chart configuration with all these three attributes.

Sankey chart with web navigation example:\ In the below screenshot, the ‘product → cart’ navigation is highlighted in all the three levels.

## **Order of Source, Target, and Depth attributes in the editor panel:** When we add an attribute to a visualization. As a result, the natural order of events can be disrupted. By creating a new attribute form and sorting the attribute using the newly added attribute form, the natural order of the events can be preserved. The new attribute form should be designed in such a way that the order of events is preserved. ### **Example 5:** Let’s examine closely the above web navigation example.\ As per the given use case, below is the screenshot of the correct order of the occurrence of the events.

Specifically, when the attribute **‘Level’** is placed in the third position within the editor panel drop zone, the natural order of events is altered. As a result, **Sankey chart** with the new data model, the output will appear as shown in the screenshot below, reflecting the disrupted event flow

Instead the correct flow of events should be as shown below.

To achieve this, according to the data in the above example, either the attribute ‘Level’ should be the first attribute in the drop zone or we should sort the attribute ‘Level’ in the ascending order.

The conclusion is that we should evaluate the order of the events before producing the sankey chart. The events should be in the correct order according to the natural flow of our use case. Insert your data into a visualisation. Check the order of the properties you’ll be configuring as Source, Target, and Depth in the editor panel. The sequence of attributes should not disrupt the flow of events. ### Sankey Chart Vertically Sankey chart now stands an ability to use the charts in vertical orientation. The following can be turned ON from the appearance tab from the property editor window. Just toggling on the Invert Axis feature we can change the orientation of the chart.

## Series **Horizontal and Vertical Offset** Two new properties are added to the series tab in the property editor, allowing us to manage the horizontal and vertical offset of any given series (Nodes). In a Sankey chart, horizontal and vertical offsets refer to the positioning of flows or links between nodes Horizontal offset governs the distance between source and target nodes along the x-axis, whereas vertical offset governs their positioning along the y-axis. By eliminating overlaps, minimizing clutter, and guiding the viewer’s focus, these offsets can increase clarity in complex Sankey charts.Proper offsets in a Sankey chart serve to express the desired linkages between categories or processes, supporting the successful communication of data-driven explanations. To use this function, navigate to the series tab in the editor and choose the series (Node) that we want to alter horizontally and vertically by entering numbers in the positive or negative range.

### Sankey Visualization Enhancement: Support for Negative Values The Sankey feature has been enhanced to support the representation of negative values. This improvement includes the addition of an option in the Sankey tab that allows users to visualize and distinguish negative values through color-coded elements. **Key Features:** Color Differentiation: When the “Show Negative Values” option is enabled in the Sankey tab, links representing negative values will be highlighted in red, providing a visual cue for quick identification. Negative Node Highlighting: Nodes with a total or overall negative value will be displayed in red, ensuring that users can easily spot areas where the cumulative value is negative. This is particularly useful for understanding the overall direction and impact of negative contributions. Mixed Link Colors: Red-colored links may connect to nodes with non-negative values. This occurs when only a portion of the data contributing to the node is negative, while the rest is positive. The node itself is considered positive in such cases. As seen in image 2 below (pencils), Consistent Negative Values: The children of nodes with negative values will consistently display negative values, maintaining coherence in the visualization and aiding in the interpretation of hierarchical relationships. **How to use:** To activate these enhanced visualization features, follow these steps: * Navigate to the Sankey tab in your application. * Locate the “Show Negative Values” option. * Toggle the option to “On” to enable the visualization of negative values with the specified color-coded elements.

**Image 1: Highlighting Negative Values** In Image 1, the Sankey diagram introduces a visual distinction for negative values: Red Links: Links corresponding to negative values are highlighted in red. This allows users to easily trace and analyze the flow of negative contributions within the dataset. Red Nodes: Nodes with an overall negative total value are prominently displayed in red. This provides insights into areas where the cumulative impact is negative, facilitating a deeper understanding of the directional flow of negative values.

**Image 2: Handling Mixed Values in Nodes** In Image 2, the Sankey visualization addresses scenarios where nodes contain both positive and negative values: In the Sankey diagram, negative values are shown with red links. These red links may connect to nodes that have a mix of positive and negative values. If a node mostly contains positive values, even with a small negative segment, it is considered positive. For example, in the image, nodes like “Pencils” and “Shoes” are not fully red because they have both positive and negative values, but the positive values dominate.

**Note:** * The introduced color-coded elements significantly improve the interpretability of Sankey diagrams, especially when dealing with datasets containing negative values. * Users can seamlessly integrate this feature into their workflow, gaining insights into the flow and impact of negative contributions within their data. ### New Macros for Sankey Chart Tooltips: node.source and node.target A new feature has been introduced in the tooltip section for Sankey charts: the addition of two new macros, node.source and node.target. These macros provide valuable information about the source and target nodes of the flows displayed in the Sankey diagram tooltips.When using node.source in a tooltip , it will dynamically populate with the name or label of the source node from which the flow originates. Similarly, node.target will display the name or label of the target node to which the flow leads.For example, when adding a tooltip for a Sankey chart, you can include these macros to enhance the tooltip’s formatting. Here’s a basic illustration of how you might use these macros:

This enhancement adds granularity and clarity to the tooltips, offering users more detailed insights into the flow paths within the Sankey chart visualization.

# Simple KPI Chart A simple KPI (Key Performance Indicator) chart is a graphical representation of key performance metrics or indicators, designed to provide a quick and easy-to-understand overview of an organization’s performance. It typically consists of basic visual elements like bars, lines, or numbers, with each KPI displayed individually. Simple KPI charts are often used to track and communicate critical performance data, such as sales revenue, customer satisfaction scores, or production efficiency, in a straightforward and easily digestible format, making it easier for decision-makers to assess performance at a glance and take timely actions when needed. ## Inputs Metrics - 3 metrics, with a minimum of one required. The first metric M1 will be displayed as a large number (Main label), while the second metric M2 will be displayed as a smaller number (Sublabel). The third measure, M3, will be utilised to set background colour thresholds. Metrics can be regular or derived, and they can be formatted as %, Fixed, Currency, and so on. Attributes - Optional ## Tip1 The screenshot below showcases the KPI widgets formatted with different colors of text and also using metric values formatted as currency and % respectively. By default KPI widget will show the name of the first metric (Main label) as the title of the widget, but we can modify this with our own text input in Appearance ? Text Label ? Label-text input box.

## Autoscaling the labels By default, all three labels \[main label, sub label, and title] on the Simple KPI chart are auto-scaled. So, if we modify the font-size of the Main label, the font-sizes of the Title and Sub label will be scaled proportionately. If you modify the font size for either the Sub label or the Title, the other two labels will not be auto-scaled. Take a look at the image below:

If you don’t want the Sub label and Title to be auto-scaled with the Main label font-size, just specify the font-size for Sub label and Title. If you want to return any font-size to the default auto-scale, just leave the font-size texbox empty. Take a look at the image below:

## Thresholds In the KPI widget, you can set panel colours and icons using thresholds. Aside from the ‘Top Label’ and ‘Sub Label’ drop zones in the editor panel of a dossier, there is a third metric drop zone called ‘Threshold Metric’ that will be used exclusively for applying thresholds in Simple KPI chart.

Open the property editor by clicking on the ‘Edit’ button and select the ‘Threshold’ tab. In the threshold, the editor window applies source, target, threshold condition, and other related information. In the below screenshot, for Simple KPI charts panel colors and icons are set using thresholds.

* This image should be present in folder (plugins\VitaraCharts\custom\images) with names as the value of Category like books.jpg, electronics.jpg, music.jpg etc * The names of the images should be in lowercase letters. For example, movies.jpg. * As a result, you will find each small multiple plot with respective image.

## Small Multiples Simple KPI chart supports small multiples feature. Small multiples feature is explained in [SmallMultiples.](https://tsdocs.vitaracharts.com/readme/small-multiples) ## Tooltip A new tooltip option has been introduced. The tooltip feature in a simple KPI chart offers extra information when users hover over or click on a KPI value. It provides context, explanations, and deeper insights, enhancing user understanding and supporting informed decision-making in performance analysis without cluttering the chart. It can be found in the property editor’s below Data Labels tab, where users can add various macros based on the information they want to show in the tooltip box.

#### Tooltip Visibility Enhancement (5.3.10) Starting with version **5.3.10,** the **tooltip** has been enhanced to improve readability. The tooltip size has been increased, allowing users to view information more clearly. Furthermore, the tooltip is now displayed outside the chart area, preventing it from overlapping with chart elements or data points. This improvement ensures better visibility and a smoother user experience. Refer to the screenshot below for further details. . ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FuNxeU2t0EqeTMnoQfoVX%252Funknown.png%3Falt%3Dmedia%26token%3D5c960240-a63d-4246-8463-528adc35d6cb\&width=768\&dpr=4\&quality=100\&sign=ead58f5\&sv=2) # Slope Chart The slope graph depicts the change in metric value for a particular attribute value over time. As a result, each (sloping) line is represented by two points, one at the beginning and one at the end of time. When more than two time values are specified, all points are plotted in a line chart fashion. Along the slope-line connecting the points, a label displaying the percentage variation between two successive points is presented (optional). ## Inputs Metrics: 1 metric. Attributes: 2 attributes. One attribute must be the time that is plotted along the x-axis. The second attribute is used to categorize input data.

## Data labels We can format the data label and variation. You can see the attached screenshots below.

We have an option to enable/disable the All, Value and Variation Data labels.

## **Labels inside the Marker** We can now display data labels inside the marker . A slope chart’s readability and clarity can be improved by adding labels inside the markers by directly connecting the values to the corresponding data points. Viewers can more easily recognize and relate data points to their relevant categories by using labels inside markers. This is particularly helpful in slope charts, where the comparison of changes between two points for various categories is the main focus. This functionality can be enabled by going to the editor’s data labels property and checking the “Label inside the marker” check box.

## Line Width and Line Style A new tab called ‘Slope’ was added, allowing us to customize the line style and line width. Line width can be used to highlight a trend or change in value for specific categories. If certain categories are more significant or demand extra attention, using a different line width for those categories can make them stand out. Different line types, such as solid, dashed, or dotted lines, can be used to differentiate between the slope chart’s many categories. This is particularly effective when numerous lines connect various categories, making it easier for viewers to distinguish between them. When comparing two conditions, time periods, or groups, utilizing various line styles for each set of data can help highlight the differences.

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can use characteristics to impose thresholds. All the measurements and attributes in the chart are listed in the source drop-down box in the threshold editing window. We can choose a source attribute and specify a threshold condition. The series of the chart determines the threshold’s aim. This indicates that the metrics will be displayed in the target drop-down box if the chart series was generated using metrics. The chart series will be constructed using attributes if “colour by” mode is enabled by adding an attribute to the “colour by” drop zone in the dossier’s editor panel. In this instance, all the attribute elements used in the colour by drop zone are displayed in the threshold target drop down box. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all inputs click on ‘Apply’ button. We can use pattern fill in thresholds (Grid/Square/Double Square/Slash), certain part of the chart can be filled with a pattern.

### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Markers At the starting value point and ending value point, the marker is displayed. These markers type and size are customizable. The marker feature in a slope chart is employed to highlight specific data points, making them easily identifiable within the chart. It aids in emphasizing critical events, such as turning points or anomalies, in data trends. For instance, markers can be used to pinpoint the exact date when a product’s sales dramatically increased. This feature enhances the chart’s clarity, helping viewers focus on essential data points and facilitating trend analysis, making it particularly useful in fields like finance, economics, and project management. ## Plot lines / Reference Lines We can set reference lines in slope chart. The steps to set plot lines /reference lines are explained in [plotlines](https://tsdocs.vitaracharts.com/readme/plot-lines-reference-lines) ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](/readme/background-images). ## Small Multiples Slope chart supports small multiples feature. Small multiples is explained in [smallMultiples](/readme/small-multiples). # Sparkline Chart A Sparkline is a short graphic that displays trend information and is aligned with rows of some tabular data. Without taking up a lot of room, sparklines (also known as micro-charts) can provide sophisticated visualisation capabilities to tabular data. ## Inputs Metrics - 1 or more metrics can be added to this visualization Attributes - Minimum one attribute is required. We recommend adding one time-based attribute as a trend over time is best represented by a sparkline. However, any other attribute can also be used.

## Markers Markers in sparkline charts are data points or symbols added to the line or bar graph to highlight specific values or events. They aid in pinpointing key information, such as peaks, troughs, or significant data points, making it easier for viewers to interpret and understand the trends or variations within the chart. Marker properties have been moved to Series properties in Vitara charts. The modified marker characteristics are used by all charts that support Series as Line/Area. Enable marker, Marker type, and Marker size choices are available to enable marker properties when the property editor is opened by clicking the “Edit” button and selecting the Series tab. There are several different markers to choose from. Navigate to the “Marker” tab, select the marker type, and then click “select.” The markers’ size can also be changed. Simply type a number into the text input field labelled “Marker Size” or use the increase/decrease buttons. Below are the screenshots with the marker options.

In the below example, the Profit metric’s line changed to line secondary axis in series property and ‘Tree’ marker is applied for the profit metric. Below is the screenshot with the marker applied in the chart.

## Series We can turn the sparkline chart into the combinational chart by changing the series type in the series tab.

## Line Options Line, Area, and Sparkline charts now have line options as of Vitara chart . The three new options are line width, line color, and line style. Line Width : Line width in line charts refers to the thickness or boldness of the lines used to represent data points. A wider line indicates a stronger emphasis on the data, making it more visible and easier to interpret. It can help convey trends and patterns clearly within the chart, aiding in data analysis and visualization. Line Style: Line style in line charts refers to the specific pattern or design used for the lines connecting data points. Common line styles include solid, dashed, or dotted lines. These styles help differentiate multiple data series and convey information about the data’s characteristics, such as continuity or variability. Line Color: Line color in line charts refers to the choice of colors used to represent different data series or lines connecting data points. It is a visual encoding technique to distinguish between various datasets, making it easier for viewers to identify and compare trends, patterns, or individual data lines within the chart. The screenshots with the line options are shown below. Line width - 2 Line width - Violet Line style - LongDash

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. We can use pattern fill in thresholds, certain part of the chart can be filled with a pattern. Pattern fill in a sparkling chart is employed to highlight data points that meet a predefined threshold. By applying distinct patterns to these points, users can quickly spot values above or below the set limit.

### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold. ## Play-by Animation Play by - animation shows the chart for each element of the first attribute. For more details about the play by feature please refer to [play-by](/readme/play-animation). ## Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](/readme/background-images). ## Small Multiples Spark Line chart supports small multiples feature. Small multiples feature is explained in [smallMultiples](/readme/small-multiples). ## Data Markers The data markers feature is introduced in the Sparkline chart. To know about **Data Markers** feature please [click Here](https://tsdocs.vitaracharts.com/readme/data-markers). ## Gradient Color Gradient color in line charts is a visualization technique that employs a gradual transition of colors along the lines connecting data points. It adds depth and visual interest to the chart, helping to convey additional information. For example, a gradient might represent the intensity or magnitude of a data variable. This can make it easier for viewers to perceive subtle variations and trends within the data, enhancing the overall clarity and aesthetics of the chart while providing more insights into the dataset’s nuances. Gradient color fill can be added where the series property is available. It can be enabled by selecting options from the series tab for individual series.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

# Stacked Column/Bar A stacked bar/column chart is a graphical representation where individual data values are segmented into sections, and each section is stacked on top of another, making up the total value for a specific category. It’s used to illustrate the composition and comparison of data categories while showing their cumulative total. In stacked bar and column charts, the second attribute groups on the first attribute instead of the traditional bar and column charts, which display a separate bar or column for each element of the attribute. Metric inputs: 1 metric Attribute: A minimum of two attributes. Available Use as Filter Option.

### Stack by : Users can also create a chart using a single attribute. When an attribute is added to the Stacked by field: * The chart automatically renders as a stacked chart. * Data is stacked based on the values of the selected attribute ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FvoIGDgblP51whm7LwPYj%252Fimage%2520%2813%29.png%3Falt%3Dmedia%26token%3Dc19f4b8c-cc86-407b-a54a-a397cfaf9dfc\&width=768\&dpr=4\&quality=100\&sign=8b5d8fbf\&sv=2)![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fes7ffLCLdXIQkpmK9eHJ%252Fimage%2520%2812%29.png%3Falt%3Dmedia%26token%3D1485dd61-ebd3-4ce9-b979-0ca864147648\&width=768\&dpr=4\&quality=100\&sign=910dff03\&sv=2) ### Stack by Percentage By default, stacked bar and column charts stack bars based on their actual values. When the **Stack by %** option is enabled, the height of each bar segment is calculated based on its percentage contribution to the total stack value. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FzVVolxvNCHnf4E6muHTb%252Fstack%2520by%2520percentage.png%3Falt%3Dmedia%26token%3D4b73626a-b5b3-4d2c-be76-f58f0dc25a80\&width=768\&dpr=4\&quality=100\&sign=fd2b4eab\&sv=2) ### Stack by Metrics **A key enhancement to stacked bar and column charts is the ability to stack by metrics in web documents.** This update allows users to create metric-based stacks directly. Refer to the screenshot below to see how to enable and use this feature. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F1QxWwAh1hKABrLdFU1Jp%252FStack%2520by%2520metric.png%3Falt%3Dmedia%26token%3Df61e53d4-8b23-417d-9b63-f67a34a3902e\&width=768\&dpr=4\&quality=100\&sign=ff664046\&sv=2) ### Data label : Users can apply styling to the **Data Label** and **Stack Totals** using the options available in the **Data Label** tab under the **Format** section ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F35ECHuj3aLiUpsUbJde9%252Funknown.png%3Falt%3Dmedia%26token%3Df1609c2b-e44d-4d54-99e0-c5090ef3462e\&width=300\&dpr=3\&quality=100\&sign=c042d7ec\&sv=2) ## Adding a line series along with stacked bars/columns In Vitara charts, a new feature in the Stacked bar/column charts allows the user to build a metric series by stacking the attribute values on the same or separate axes. Metric series can be created in three ways: line, area, and data markers. The screenshot below shows a layered Column chart with attributes layered on one axis and a metric series \[line] produced on the other.

To utilize metric series, the chart must have two attributes \[one as a category and the other as a **Stack by]** and at least two metrics \[the first metric is always used to establish the value of the bars/columns, and other metrics can be used to make the metric series]. Let’s look at how to make a metric series in the basic steps below. ### Example: Creating a Metric Series on the Secondary Axis in a Stacked Bar Chart This example demonstrates how to add a metric-based series to a stacked bar chart and display it on the secondary axis. #### **Step 1** Create a stacked bar/column chart with 2 attributes and metrics. Stack by attribute values \[i.e drag an attribute into ‘**stack by**’ dropzone]. See the sample screenshot below. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F2DePjwh2HnnThVCnVKr1%252Fstep1.png%3Falt%3Dmedia%26token%3Db783c146-e415-4cb3-8155-e881df22631a\&width=768\&dpr=4\&quality=100\&sign=3fc3a75e\&sv=2) #### Step 2 Open the **Property Editor**, navigate to the **Series** tab, and scroll to the bottom to find the **Metric Selection** drop-down. Select the required metric and click **Add** to create the series; this opens the series options menu. Refer to the screenshot for details. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FL5qJnvStus5w5IRXYCjT%252FStacked_step3_1.png%3Falt%3Dmedia%26token%3D61d424c6-5633-4f32-9ff7-c7fd7f9b3638\&width=768\&dpr=4\&quality=100\&sign=6518705d\&sv=2) #### **Step 3** Select the required options for the series and click **Apply**. Refer to the screenshot below for guidance. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fg31iTyrg79XzHqGZFoPw%252FStacked_step3_2.png%3Falt%3Dmedia%26token%3D743f7d51-0c06-4c59-ac8e-772e54f37a96\&width=768\&dpr=4\&quality=100\&sign=d31eea47\&sv=2) The selected metric is now displayed as a **line series on the secondary axis**,. Refer to the screenshot below for an example. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FIl830wieuYhj1DQRcwa7%252Fstep4_2.png%3Falt%3Dmedia%26token%3D8b6647ee-fe75-4208-930a-699407d2f93a\&width=768\&dpr=4\&quality=100\&sign=b92cb02e\&sv=2) ### Stacked Bar/Column Chart Enhancements: Secondary Axis In version **5.3.10** of Vitara Charts, stacked bar /column charts have been enhanced to offer greater flexibility in creating metric series as bar/column on secondary axes. Previously, users could build metric series by stacking attribute values on secondary axes, but this capability was limited to area, line, and data marker chart types. With this update, metric series can now be created as **columns** on the secondary axis in stacked column charts, allowing for clearer and more structured data representation. Additionally, a **bar** option has been introduced for stacked bar charts, enabling metric series to be plotted on secondary axes. These enhancements facilitate easier comparison of multiple metrics simultaneously and provide improved control over chart visualization, particularly when working with complex datasets ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fvd3Vi4PUmQDodP3ZWIr6%252Funknown.png%3Falt%3Dmedia%26token%3Da99edab5-fea7-4f3f-aac4-c1aee4fe3fcf\&width=300\&dpr=4\&quality=100\&sign=29d6fdb3\&sv=2)![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FfMDbpTpgK6LPSEWkPXWE%252Funknown.png%3Falt%3Dmedia%26token%3D82557a02-6319-47a9-a74c-09576daa1dfe\&width=300\&dpr=4\&quality=100\&sign=d4af858a\&sv=2) ## **Remove the Metric Series** The applied series can be removed if the metric respective to that series is removed from the metric dropzone. ## Pattern Fill in Series Pattern fill feature in a stacked bar/column chart is utilized to enhance data differentiation. By applying unique patterns to each segment of the bars/columns, it aids in distinguishing individual components or categories within the chart. This visual enhancement is particularly helpful when dealing with multiple data series or to highlight specific data elements. This charts have the Pattern fill option (Grid/Square/Double Square/Slash) in the Series tab, which allows us to display data in a more presentable manner.

## Polar Mode In VitaraCharts, a new feature is added in the Stacked charts where users can enable ‘Polar mode’ i.e, Stacked bar/column chart with a radial value axis. This way of using axes is called Polar coordinate system. Let’s see how to enable ‘polar mode’ in simple steps. \ **Step 1:**\ Create a Stacked Bar/Column chart with a minimum of one attribute and one metric. See the sample screenshot below.

**Step 2:**\ Open the property editor and go to the ‘Stacked Bar/Column’ tab. Enable the checkbox ‘Enable Polar Mode’. See the screenshot.

Then the value axis of the chart will be converted into Polar coordinates. Below screenshot shows the default behaviour of the chart with Polar coordinates.

## Vertical Polar Mode We have introduced the new feature of Vertical Stacked Column. Vertical polar mode in stacked column charts arranges data points in a circular pattern while using vertical columns for value representation. It’s valuable for visualizing cyclical trends across categories or time periods, enhancing insight into contributions of each segment. This technique is especially useful for showcasing cyclic data distributions and relationships in a distinctive manner. Below are the steps to enable it. Go to the Stacked Column/Bar tab in the property editor and turn on polar mode to observe that the columns are now vertically aligned in polar mode.

## **Polar Mode settings** \ Polar mode comes up four settings which include Start angle, end angle, Outer Pane Size, Inner Pane Size.\ The default settings of Polar mode are\ Start Angle: 90, End Angle: 360, Outer Pane Size: 85, Inner Pane Size:20.\ We can modify these settings anytime according to our preference. Let’s see some of the settings below\ Start angle : 0\ End angle : 270\ Outer Pane Size : 100\ Inner Pane Size : 15\ Then chart looks like the below screenshot

All the axes settings available for normal Bar chart are also applicable to Polar coordinate system. ## Data labels We can format the data labels and Stack totals indepently. Below is the screenshots of this option.

In Vitara charts, a new option ‘Identify format across the metrics’ is introduced in Data labels tab. The number format of stack totals in stacked charts will be the same as the number format of the first statistic in the chart. If the first metric’s value is zero or nulls, the stacked chart fails to display the stack totals in the specific number format applied to the metrics. To get over this limitation, we need to enable the ‘Identify format across metrics’ option. When we enable this attribute, the stacked chart will not rely on the number format of the first metric when establishing the number format for stack totals, but will instead examine all the metrics available in the chart. Example:\ In the below example, all the metrics in the a stacked chart are formated to a number format to show all numbers in Millions, and everything below the million should be ‘0’.

Set the Number Formatting in TS Table view to metric as shown in below screenshot

In this example, the values of Profit metric are below 1 Million, so all the values of the profit metric become zeros. As a result, stacked chart fails in indentifying the number format that should be applied to the stack totals. \ Hence chart will display stack total in default number format. Below is the screenshot when the option ‘Identify format across the metrics’ is not enabled.

In this use scenario, the chart should take into account not just the first metric but also the number format of other metrics in the chart to establish the number format of the stack totals. The screenshots that demonstrate how to enable the “Identify format across the metrics” option and the stacked chart that results from doing so are shown below.

## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. We can use pattern fill in thresholds, certain part of the chart can be filled with a pattern.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

## Zero Value Bar The “zero value bar” feature in a stacked bar/column chart helps represent categories or data points with zero values. While these segments have no height, they are included in the chart to maintain proper category alignment, ensuring a complete and accurate visualization of the data. We included a new feature that allows users to show zero value bars. This feature can be enabled under the “Stacked Bar/Column” tabs, where it can be used to display metrics, whose values are zero.

## Play Axis In stacked bar/column charts, we have added the “play axis” option . This feature enables dynamic presentation of data changes across time or categories. This interactive tool illustrates the contributions made by data series to each category or time period. This is excellent for displaying dynamic insights and comprehending trends. The play axis feature will be accessible/enabled from ‘Play axis’ tab as well as the dropzone available.User can access this when editing staked bar/column chart.Within the tab user can enable/disable data label and apply text style accordingly.User can also set speed of the cog setting available on the play axis.

#### Reorder or Reverse We have added new feature of the “reorder” or “reverse” functionality in stacked column and bar charts allows users to change the order in which data series are displayed. Reordering helps emphasize specific data categories, making it easier to focus on critical information. It is a useful feature for customization and improving the clarity of data presentation. This feature will be accessible from the “Stacked Column” tab in the chart editor menu. Users can access this tab when want to reverse stack order in chart.

## Removing Spaces between Stacked Column Removing spaces between columns in a chart is feasible through adjusting the “gap width” or “distance” parameter. By adjusting this feature, one can create a more compact visual representation with a seamless alignment of columns , allowing for a clearer and more impactful presentation of the data. This option is available in the property editor under the ‘Stacked Bar/Column’ tab and is titled Bar/Column Spacing.

In the screenshot below, the spacing of columns is clearly visible in the before and after shots, however in the after image, the spacing is adjusted to ‘0’ among the columns.

## Adding Grid lines over Stacked Columns/Bars We have introdcued a new feature of adding grid lines over bar/column ,stacked bar/column chart,this feature enhances clarity by aligning gridlines with the bars, aiding in precise data interpretation. Adjust the gridline appearance to suit preferences. By overlaying gridlines over the bars in polar mode, it facilitates a clearer representation of data and assists in analysis within the circular chart structure. You may enable this functionality in the property editor by going to the ‘Axes’ tab, then ‘Value Axis’ under the ‘Other’ option and checking the ‘Show Grid Lines over Bar’ checkbox.

# Tornado Chart Tornado diagrams or charts are a subset of Bar charts in which the data categories are listed vertically rather than horizontally, and the categories are ordered so that the largest bar appears at the top of the chart, the second largest appears second from the top, and so on when sorted descendingly. They are so named because the final chart looks like one half of a complete tornado. They are excellent for representing two values that must be compared across any dimension. ## Inputs Metrics: 2 metrics are required. Attributes: 1 or more attributes are required. In the example below Profit and Profit Forecast are represented by the bars over time attribute Month. Also, the chart below is sorted by Profit in descending order in the editor section.

## Series We can make the sparkline chart as a combinational chart by changing the series type in the series tab. Instead of a bar, we can make a chart to show either line/area/column/scatter. This charts have the Pattern fill option (Grid/Square/Double Square/Slash) in the Series tab, which allows us to display data in a more presentable manner.

## Markers In the case when tornado chart series is changed to either line/scatter/area, we can change the marker to any shape listed in ‘marker type’ in the ‘marker’ tab. ## Thresholds In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition. The target of the threshold depends on the series of the chart. This means, if the chart series is created using metrics then target drop down box will display the metrics. If we enabled ‘color by’ mode, by adding an attribute to the ‘color by’ drop zone in the dossier’s editor panel, the chart series will be created using attributes. In this case the threshold target drop down box will show all the elements of attribute used in the color by drop zone. In this case we can set threshold target using attribute.

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

After giving all the inputs click on ‘Apply’ button. We can use pattern fill in thresholds, certain part of the chart can be filled with a pattern.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

## Zero Value Bar A zero-value bar in a tornado chart represents variables that have no impact on the outcome, helping users identify and disregard insignificant factors in decision-making or risk assessment. We included a new feature that allows users to show zero value bars. This feature can be enabled under the “Tornado” tabs, where it can be used to display metrics, whose values are zero.![](/files/lwsUvymoHGkRrUtwyZiD)

# Variwide Chart Convert a Column chart to a Variwide Column chart or a Bar chart to a Variwide Bar chart. In a column chart, a variwide chart can be used to visualise a second dimension. In addition to its value, each data point is assigned a weight, which determines the breadth of the column. It computes the stack’s width to occupy the entire plot area and just allows the column widths to reflect a value. Variwide charts can be created from column and bar charts. You must enable the Dynamic Width(metric\_name) to see the variwide chart. Variwide chart applications: Use the Vitara Column/Bar chart and navigate to the property editor. Property of an Open Column/Bar Enable the Dynamic Width (metric name) feature.

Below is the Variwide column chart where the Y-Axis represents the cost of the categories, while the column width is proportional to the categories.

Below is the Variwide Bar chart where the X-Axis represents the cost of the categories, while the column width is proportional to the categories.

## **Axis formattings in variwide chart** In a Variwide chart, the axis representing categories changes depending on the width of the stack to fill the entire plot space. The percentage of elements is determined as \[(value of datapoint/sum of all metric values) \* 100]. The screenshot below shows how the percentage of profit is determined in the variwide chart.

# Waffle Chart A waffle chart is a visual representation that uses a grid of small squares to display data proportions or progress toward a goal. Each square represents a portion of the whole, making it easy to visualize and compare different categories or track achievements in a visually intuitive manner. Block (Percentage to total), list (Percentage to total), and grid (Percentage metric value) are the three charting modes supported by the Vitara. ## Inputs Metrics: 1 metric Attributes: 1 attribute. The screenshots below showcases all the three modes of waffle chart. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fll0haR87hSL33YVuB2PF%252Funknown.png%3Falt%3Dmedia%26token%3Da07eb7b4-e202-4b31-87d3-2ff5b5f9f2e6\&width=300\&dpr=3\&quality=100\&sign=e512dce5\&sv=2)

## Markers We can choose from different types of markers available in the ‘Marker’ tab of the waffle chart. The size of the marker is also customizable. ## Threshold In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases. Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds. To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold. Note: We can apply thresholds using attributes. All the measurements and attributes in the chart are listed in the source drop-down box in the threshold editing window. We can choose a source attribute and specify a threshold condition. The series of the chart determines the threshold’s aim. This indicates that the metrics will be displayed in the target drop-down box if the chart series was generated using metrics.

In the threshold, the editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

Apply all the inputs and click on ‘Apply’ button.

#### Background Image The steps to set a background image for all Vitara charts are explained in [backgroundImage](/readme/background-images). # Waterfall Chart A waterfall chart is a type of data visualisation that shows the cumulative effect of consecutively added positive or negative numbers. If the values are not predefined or flexible, such as starting budget, quarterly spend (YTD), and remaining budget, the number of quarters elapsed cannot be predetermined at build time. Vitara provides a waterfall widget version that includes a starting metric and the cumulative sum of all successive metrics, which results in a total bar. The chart provides plot possibilities depending on certain metrics. The property editor provides a list of metrics; each statistic can be extended to select plot settings.We have the Non-Additive option, which means that we cannot include the starting value in the total value, and the Auto compute total option, which means that we can disable the total value in the chart. ## Inputs **Attributes:** Optional. For the attribute, there are two drop zones. The ‘group by’ and ‘break by’ drop zones. Attributes are only required if we wish to establish groups based on attribute values or divide metrics based on attribute values. We can also use both properties together. If you wish to see the metric break up over attribute elements, place an attribute in the ‘break by’ drop zone. The metric values for each attribute element will be displayed in incremental order. To make small multiples, drag an attribute into the ‘group by’ zone. Click here to learn more about small multiples. [here](https://tsdocs.vitaracharts.com/readme/small-multiples) **Metrics:** A minimum of two metrics must be used. The first metric, M1, is used as the starting value, while the second metric, M2, is utilized to add or remove from the starting value. The final bar (Total) represents the total of metric M1 and metric M2. The group by and break by features are described using the following data in the example below.

**Break by:** If we drop the quarter property in the ‘break by’ drop zone, the chart will default to using the first value of the first measure as the start value. We can also alter it to total or last value if we like. The second metric will be displayed in the break by the quarter attribute format. In our example, the quarterly Delta metric values are added/subtracted in four steps: Q1, Q2, Q3, and Q4. The third metric will be a total of the first and second metrics. Total is the default function for the third metric. We can also apply a break to individual indicators.

**Group by:** When we add an attribute to a group using Dropbox, a separate chart is created for each piece of the attribute. The year attribute is added to the group by drop zone in the preceding example. The year attribute is made up of two elements: 2017 and 2018. The chart will now display the results sorted by year attribute, i.e. quarterly data for 2017 and quarterly data for 2018.

## Appearance We can change the appearance of the waterfall chart by changing the bar colours and width. **1. Colours of the bars** We can change the colour of the bars in the Vitara waterfall chart. They are the colour of the up value, the colour of the down value, and the colour of the total bar. These options can be found in the Appearance tab. See the screenshot below for the bar colours that we chose. Green is the up colour, red is the down colour, and blue is the total colour.

**2. The width of the bar** In the waterfall chart, we can also change the width of the bars. To change the width of the bars, go to the appearance tab and enter a value (for example, 10) in the Bar/Column Width input area. Compare the bar width(10) in the screenshot below to the bar width in the screenshot above.

## Vertical/Horizontal Waterfall In the Waterfall chart, we have a ‘Invert Axes’ option that allows us to flip between Vertical and Horizontal Waterfall charts. **1. Waterfall in the Vertical** The ‘Invert Axes’ option is enabled by default, which results in a Vertical Waterfall chart. Vertical waterfall charts have horizontally oriented bars with the category axis shown on a vertical axis. Please see the screenshot below.

**2. Waterfall Horizontal** Simply uncheck the ‘Invert Axes’ item to use the Horizontal waterfall chart. The bars in the Horizontal waterfall chart are vertical, and the category axis is presented on a horizontal axis. Take a look at the image below:

## Axes ‘Auto Compute Start Value’ is a unique feature for the value axis in the waterfall chart. This setting will be helpful if we are unsure of which value should be set as the start value and the first metric value in the chart is comparably much larger than the succeeding metric values. Axes > Value axis > Start Value is where you can change this parameter. This option’s deactivated mode is the default state. View the ensuing screenshot.

Below is the screenshot which shows how the chart looks before and after enabling ‘Auto Compute Start Value’

If you noticed the above screenshot, the start value in value axis and bar lengths are different. Also the space between the category axis line and bars has also changed. ## Data Labels A feature is added to the waterfall chart that allows the data labels to be displayed outside of the bar/column. The ‘Show Label Outside Bar/Column’ checkbox is available in the data labels tab. See the image below.

This feature is enabled by default for charts .The screenshot below depicts how the data labels appear after enabling the ‘Show Label Outside Bar/Column’ option.

The option ‘Show Label Outside Bar/Column’ is tied to horizontal data label positions. For example, if the data label is set to appear outside the bar/column, the horizontal data label locations right, left, and centre will have no effect on the chart. ## Creating Groups and group settings: The idea of group creation in the waterfall chart is introduced . Metrics of the same kind can be grouped. For instance, group all the measures related to revenue and all the indicators related to expenses. The net profit/loss statement is produced by adding these groups collectively. ## **1. The default Group:** A default group is formed by all of the metrics in the chart. We can add new metrics to this default group as well as remove metrics from it. When we add a new metric to a dossier or document, it is placed in the default group. From the metrics in the default group, we may construct a new group. The screenshot below shows the default group when the waterfall chart is given three metrics: Budget, Delta, and Actual.

We can rename the default group or any other group. Place the cursor in the group name text input box and type the text you want as the group name. ### **2. Group Settings:** Each group will have two options. 1. Add subTotal and 2. Deduct Value. Expand the ‘Group Settings’ tab to get these options.

#### **Add Subtotal:** We can create a bar for each group displaying the subtotal of that specific group. Enable the ‘Add Subtotal” check box. #### **Deduct Value:** The cumulative sum of the metrics/metric groups in the chart will be computed by the waterfall graphic. If we wish to subtract any metric/metric group value from this total, we can do so by selecting the ‘Deduct Value’ option in that group. For example, in order to construct the profit/loss statement, we must deduct expenses from revenues. In this case, we must enable ‘Deduct Value’ for the expense-related metric/metric group. ### **3. Creating New groups:** To create a new group of metrics please refer the below screenshots.

By default all the metrics in the chart will be in the default group. To add metrics to the new group drag and drop the metrics from the default group into the newly created group. Each group will have its own ‘Group settings’ option and option to create a new group.

## Plot line We’ve introduced plotlines feature to the waterfall chart , plotlines can be added on metric sources in waterfall chart.

## Background Image The steps to set a background image for all Vitara charts are explained in [*backgroundImage*.](https://tsdocs.vitaracharts.com/readme/background-images) ## Small Multiples When we apply an attribute in the ‘Group by’ drop zone in Vitara charts, the waterfall chart by default supports small multiple features. To turn off small multiples, enter the property editor by selecting the ‘Edit’ button. The property editor is seen in the screenshot below.

Disable the checkbox ‘Enable Small Multiples’. Small multiples is explained in [*smallMultiples*.](https://tsdocs.vitaracharts.com/readme/small-multiples) ## Zero Value Bar We included a new feature that allows users to show zero value bars. This feature can be enabled under the “Waterfall” tabs, where it can be used to display metrics, whose values are zero.

## Enhanced Data Label Placement for Waterfall Charts In the latest update, a new and highly anticipated feature has been introduced to the dataLabels tab, specifically tailored for waterfall charts. This enhancement allows users to precisely control the placement of data labels for negative and positive values, offering a more granular and intuitive representation of data in waterfall charts. ### **Feature Details** The key highlight of this update is the introduction of a new option that enables users to display negative values (i.e., values below the zero line) at the bottom of the bar, while positive values are shown on top of the bar. This feature is specifically designed to enhance the visual clarity of waterfall charts, providing users with a more insightful representation of data distribution. This feature is exclusively available for waterfall charts and can be accessed within the dataLabels tab. To activate this enhanced placement option, users must also have the “Show Label Outside Bar/Column” option enabled. ### **Implementation** To implement this feature, navigate to the dataLabels tab and locate the newly added option “Show Negative Value Label Below Bar/Column” related to the placement of negative and positive values. By selecting this option and ensuring that “Show Label Outside Bar/Column” is enabled, users can effortlessly enhance the presentation of their waterfall charts.

Consider a scenario where a waterfall chart represents financial data, including positive and negative values. With the new feature enabled, negative values (e.g., expenses) are displayed at the bottom of the bar, emphasizing their impact, while positive values (e.g., profit) are showcased prominently on top of the bar.

# Add as Filter In ThoughtSpot, you can enhance your chart by adding filters directly from the panel where attributes and measures are listed. This feature is particularly useful for refining the displayed data, ensuring your analysis focuses precisely on relevant information. It also provides flexibility in managing data visibility among different user groups, independent of row-level security measures. There are three ways to add filters to your chart: ## **1. Adding a filter from Panel** I’ve created a chart using measures such as Attribute - Category, Measure - Cost, and Revenue. On the left side, you’ll find panels showing Measures and Attributes. When you hover over any selected element, a small “Add as filter” option appears.

Clicking on the attribute filter opens a small pop-up where you can choose to exclude or include specific data points. For example, you can exclude ‘Books’ and include only ‘Electronics and Movies’. The chart will adjust to reflect your selections accordingly.

Similarly, clicking on the metric filter opens a small pop-up where you can apply different conditions to the chart. For instance, applying a condition like “greater than 300,000” filters the chart data accordingly.

## **2. Adding a Filter from the Grid Table** When creating an answer from the grid table, you have the option to add a filter. This will display the same pop-up option for filtering as mentioned previously. You can apply filters from here for both attributes and measures in the same manner.

## **3. Adding a Filter from the Data Tab** You can also go directly to the Data tab and select the worksheet you want to work on. Open the worksheet and under the sheet, you will find an option to ‘Edit Worksheet’. Once you click on it, the filters option will be displayed on the left side, allowing you to apply filters on attributes or measures as described in the first step.

# Allow/Block URLs **Note** : To use this specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ## Allow/Block URLs in the Vitara Charts To address the requirement of having URLs in the VitaraCharts, we have made some enhancements #### **1. An option in the ‘global.txt’ file:** A property is included in the global.txt file. By using this property you can enable/disable the URLs in all the Answers /liveboards where VitaraCharts are used. Below is the screenshot of this property from the global.txt file. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FAPfmzQjDnpN753PYQ2aE%252FallowURLs1.png%3Falt%3Dmedia%26token%3D991134ee-93ff-435a-a966-98759ff8761f\&width=768\&dpr=4\&quality=100\&sign=97f947dd\&sv=2) The global.txt file can be located at the below path **plugins\VitaraCharts\custom** ***Note: We have to configure the respective global.txt file for web and library applications.*** ***security.allowURLLinks = 0 or 1***. Setting 0 (zero) will not allow URLs used within the anchor tag ‘href’ property. With this setting enabled only anchor tag titles are allowed. While setting to value 1 (one) will enable URLs used within the anchor tag ‘href’ property. By default the value of the property ***security.allowURLLinks = 0***. This means URLs in the VitaraCharts will not work. ## **Security Tab** Within the property editor of a specific chart, the Security tab allows you to control the URLs specific to that chart within a particular answers. This means you can fine-tune URL settings for each chart as needed. Below is a screenshot of this option:

By default, the ***‘Allow URL Links’*** is set to the value ***Default***. This means the functioning of the URLs is governed by the property set in the global.txt file. If global.txt is = 0, then URLs will not work. ***Enable/Disable:*** Set the ‘Allow URL Links’ option to either Enable/Disable to allow URLs or block URLs in that particular chart. ### Example Use Case Starting from Version 5.1.3, a new feature has been introduced to enable or disable URLs. * The dataset must include a column containing HTML tags. * Once this column is included, the URLs will automatically display on the chart. A sample dataset is provided below for reference.

Next, add attributes and metrics to the chosen drop zones, then enable Allow URL Links from the Security tab .![](/files/m7rLkvBDOMMSDbE2RB6A) **Important:** To open a file path, users must press Ctrl + Left Click on the URL. If direct-click access is required within the visualization, the URL must be added to the whitelist ### Handling Relative URLs for XSS Protection #### **Allowed Relative URL Formats** When specifying relative URLs in the href or src attributes, they must start with a forward slash (/). This requirement ensures proper XSS (Cross-Site Scripting) encoding and enhances the security of your application. #### **Summary of URL Filtering Logic** To enforce the rule for relative URLs: 1. Ensure the URL value starts with /. 2. Trim any leading and trailing whitespace from the URL value. 3. If the URL does not meet the criteria, replace it with an empty string to prevent XSS attacks. #### **Safe Attribute Function Implementation** The following function filters href and src attribute values to ensure they comply with allowed formats and prevent XSS attacks: `"http://","https://","mailto:","tel:","data:image/","ftp://","./","../","#","/"` ### **Important Notes** * Starting Character: Ensure that all relative URLs start with a forward slash (/). This is essential for correct XSS encoding. * Trimming Whitespace: Trim leading and trailing whitespace from the URL value before validation. * Default Behavior: If a relative URL does not start with a forward slash, it is replaced with an empty string to prevent potential XSS attacks. By adhering to these guidelines and implementing the provided function, you can mitigate the risk of XSS attacks through careful validation and filtering of relative URLs. ***Note: If you do not configure the functioning of URLs using any of the above methods, VitaraCharts will block all the URLs.*** # Animation ## The Power of Animation in Charts: Starting from version 5.3.5, the animation option for charts can now be toggled on or off, providing greater flexibility for customizing chart behaviour. This allows users to control the visual transition effects, improving the overall presentation of data. To configure the animation, navigate to the specific tab for each chart. The animation setting is available for the following chart types: * **Angular Gauge**: Available under the Gauge tab. * **Column/Bar Chart**: Available under the Column/bar tab. * **Stacked Column/Bar** Chart: Available under the Stacked Bar/Column tab. * **Sparkline/Line/Area** : Available under the Line tab * **Tornado:** Available under the Tornado tab. ***Note***: Starting from version 5.3.5, the animation option has been removed from the Series tab and is now only configurable through the respective chart tabs listed above. Please refer to the screenshots below for references to the Column and Angular Gauge Charts. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F5azR1R2LKZnS7v1KYe9s%252Fimage.png%3Falt%3Dmedia%26token%3Df2b2b2cf-5460-408f-9d8d-b9ff773a53b6\&width=300\&dpr=4\&quality=100\&sign=7be01a72\&sv=2) ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2Flh7-rt.googleusercontent.com%2Fdocsz%2FAD_4nXf15mC1wPLluEBiexuou5fnGAbCjFTLyVJfjNbCF2sfCRK9td7_LBzGL7xfpRYZaACfPs5ETOER2hNBd4UD_56CRJCm9_WfheC8coacATLjv-wAUA-SZdJfRMs1K21EUb7sik1dvw%3Fkey%3DHG8zy91NAlh2msPjWJsC0g\&width=300\&dpr=4\&quality=100\&sign=9e35dea9\&sv=2) **Note** : To use this specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." #### Enable/Disable Animation in Vitara Charts Globally In the Vitara Charts , we have introduced an enhancement that allows users to enable or disable animation across all visualizations. **An option in the ‘global.txt’ file:** A property is included in the global.txt file. By using this property, you can enable/disable the “animation” in all the dossiers/documents where Vitara Charts are used. Below is the screenshot of this property from the global.txt file. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2Flh7-rt.googleusercontent.com%2Fdocsz%2FAD_4nXefkYjRmbdUwi_cbzItTkEoi2UqXwOm1TZ3oi-VFZILmx8V0u4MNJJfNTveGvum4_VJn5G8gbmpRmi2mZ8l_AR6rp9kv4NjuFundG4p-ZkX8Awac1AJOm6HFzoyclSrV45EdhPv%3Fkey%3DHG8zy91NAlh2msPjWJsC0g\&width=300\&dpr=4\&quality=100\&sign=d4f068fe\&sv=2) #### **File Location:** The global.txt file can be found in the following locations: **plugins\VitaraCharts\custom** #### **How to Configure Animation** In the global.txt file, set the following property: **Default Setting:** chart.animation=1 (Animation is enabled by default.) * This ensures that all charts display animation automatically, without requiring manual activation in each chart’s editor menu. **To Disable Animation**: Set chart.animation=0 to turn off animation globally. # Appearance The appearance settings allow customization of the color palette, Chart Area, and Plot Area colors, as well as Auto Scroll. Please refer to the attached GIF for reference.

\ Detailed Auto Scroll feature information — [click here.](https://tsdocs.vitaracharts.com/readme/auto-scroll) # Auto Scroll ## Auto Scroll Vitara Charts added a new feature, auto scroll. Which the charts will be able to be scrolled along the category axis. Users can now view charts that expand the category axis according to the density of data points (in relation to the user-specified size or series width). With this new functionality, the size of the scroll area is calculated so that the data doesn’t overlap. (To avoid overlap padding, group padding is set to have a minimum value.) ## **List of charts supports this feature:** 1. Bar/Column Charts 2. Stacked Bar/Column Charts 3. Line/Area/Sparkline Charts 4. Tornado Chart 5. Column Range Chart 6. Bullet Chart 7. Waterfall Chart 8. Histogram Chart 9. Slope Chart 10. Dumbbell Chart ## **How can we enable Auto scroll feature** The Auto Scroll option will be available in the Chart Scroll menu under the Appearance tab.

## **Options:** 1. Enable Auto Scroll :To enable or disable auto scroll, check the box placed under the Appearance tab’s menu. 2. Scroll Area Opacity: We can change the opacity of the chart region behind the value axis. The default value is 85, which can be changed with the help of a slider,having range of 0 to 100. A screenshot of the chart with the scroll area opacity set to “0” is shown below, displaying that when you move the scroll bar, the chart will appear behind the value axis.

## **Below is the screenshot of charts with Auto scroll feature** This auto scroll bar can be moved along the category axis and appears horizontally or vertically, depending on how the chart is configured.

Invert axes are supported for the column range, waterfall, dumbbell, and bullet charts. When the invert axes option is disabled, the scroll bar automatically moves to the bottom of the chart and scrolls along the category axis.

# Axes ### Category Axis Under Category axis settings, we can format the axis labels, axis title, axis line, hide/unhide axis etc. Let’s see some of them #### Others : Users can hide the axis by enabling the Hide Axis option. They can also adjust the grid line width and enable or disable grid lines using the options available in the Axes tab. Additional options are available to modify the axis display. For example, users can enable Reverse Direction to display the axis in the opposite direction, or enable Display Axis on Top to position the axis at the top of the chart. These options allow the axis and data to be displayed according to the required layout. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fz67xADtwTtUtldp9ocRY%252Funknown.png%3Falt%3Dmedia%26token%3Db0589f7d-1b18-485e-9858-75de40ba9610\&width=768\&dpr=3\&quality=100\&sign=3fa1ccaa\&sv=2) **Note :** Similarly, these options are also available for the Value Axis. #### Force sort axis data : The Force Sort Axis option allows users to manually control the sorting order of data displayed on a chart axis. By enabling this option, the order of attributes on the Category Axis can be explicitly defined, overriding the default sorting or MSTR Advanced Sorting applied to the visualization. This feature allows users to sort the axis data based on the Category Axis attribute, ensuring that the chart displays categories in the required order. This option is available under the Axis tab for Category Axis ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FZCQtaVjkkWLhviZsO1v0%252Funknown.png%3Falt%3Dmedia%26token%3D0626aa40-6885-4297-9f27-383be420d33e\&width=300\&dpr=3\&quality=100\&sign=4eb084e\&sv=2)

## Multi level Axis rotation In VitaraCharts, each level can independently rotate the labels on the category axis. This implies that when there are two attributes in the chart, we can individually control the rotation of each level’s axis label. Axis label rotation can also be configured independently for each level when there are 3 attributes. All charts that include horizontal category axis labels are capable of using this feature. Using the example below, let’s examine this. With two attributes \[Quarter, Month] and a measure, we have a column chart. View the resulting screenshot. See the screenshot below

The category axis labels at two levels in the above screenshot were rotated to some value by default based on the available space. For each level, we are able to get the labels to spin at a distinct value. For instance, if level 1 = 0, level 2 = -90. Also, have a look at the graphic below to see how things have changed.

And let’s say we have 3 attributes \[year, quarter, month]. We set the rotation for level 1 = -90, level 2 = -45, level 3 = 0. See the screenshot below

## Value Axis Under value axis settings also, we can format the axis labels, axis title, axis line, hide/unhide axis etc. Let’s see some of them ## Use Metric Formatting. Just like we have ‘use metric formatting’ option for data labels, there is an option added for value axis labels also. This option is available in **Axes > Value axis > Label** tab of the property editor. See the screenshot below

This property is linked with the ‘metric format’ property available in data labels. That means, if you enable this property, the value axis labels take the formatting of the data labels.\ To understand this, let’s take an example of the below screenshot

As you can see in the screenshot above, the datalabels and axis labels formats are distinct. If you want the same format for axis labels, click the ‘use metric formatting’ box under the value axis tab. The chart then appears as seen below. Take a look at the screenshot below.

### Flexible Metric Selection for Value Axis Label Formatting In version 5.3.5, the "Use Metric Formatting" option, located in Axes -> Value Axis -> Label, has been enhanced for greater flexibility across multiple chart types, including: column, sparkline, column range-stacked bar, bubble, dumbbell, bullet, area, tornado, line, bar, and stacked column charts. This option enables users to apply metric-based formatting (such as currency, date, time, percentage, etc.) to various labels, including Y-axis labels, data labels, and tooltips. Previously, when multiple metrics with distinct number formats were present, only the first metric in the dropzone would dictate the format, requiring manual reordering to apply a different metric's format. ### **New Feature Improvement:** To simplify this process, a dropdown menu has been added, listing all available metrics for selection. Users can now easily choose which metric's number formatting to apply, without altering the dropzone order. By default, the first metric is selected to maintain backward compatibility with prior versions. * Example : Consider a dataset containing multiple metrics, each with distinct number formats: one formatted as a percentage,and another as currency. In the "Use Metric Formatting" option, you can leverage the new dropdown to select any of these metrics to define the number formatting applied to your chart's Y-axis labels, data labels, and tooltips.

## Tick interval The ‘Tick interval’ setting is now available in the Axes tab . This feature allows you to change the scale of the value axis. This option may be found in Axes > Value axis > Other. This option is available for both the major and secondary axes. See the image below.

Let’s see this setting with the example below. We have a bar chart with 2 attributes and 2 metrics.

In the following chart, the default tick interval is 2M (two millions). Now we’ll change the tick interval to 1M (one million). Simply enter ‘1000000’ in the tick interval textbox to achieve this. See the screenshot below for an updated tick interval on the chart.

Setting up the tick interval for values in % format:\ Below is a column chart with metrics in percentage format.

The default tick interval for the above chart is 10%. Now we will customize the tick interval to 5%. For this to happen, we have to put ‘0.05’ the tick interval textbox instead of ‘5%’\ See the below screenshot which shows the updated tick interval

## Start / End Values The value axis can have start and end values set. A metric, fixed value, or percentile basis can be used to specify the start or end value. Axes > Value Axis > \[Start Value, End Value] provides access to these properties. View the property editor in the screenshot.

Let us discuss start/end values with an example below

All four bar values in the screenshot above are greater than 30.7% and less than 31.2%. Therefore, there is no advantage to the bars beginning at 0%. Therefore, the results may be properly examined if the start value is set to 30.7% (0.307) and the final value to 31.2% (0.312). View the screenshot to see the start and end values.

And after specifying the start & end values, the chart looks like the below screenshot

## Sync Axis The primary and secondary axes are now synchronized via a new feature that we have added. We must enable the secondary axis for one of the metrics under the series tab in order to enable the new feature.

The primary and secondary axes values are aligned in the screenshot below.

### Truncating and Wrapping We have added new features to the label’s property that allow us to customize the labels by truncating or wrapping them.

#### Truncating

#### Wrapping

We can also control the labels from the value axis category in case of Bubble and Heatmap Charts. ### **Label interval** Introduces two significant enhancements in the Axes tab that allow for greater customization of the category axis: 1. **Label Interval** : This feature enables users to control the scale of their category axis by adjusting the interval between labels. This customization can help in optimizing the readability of charts with densely packed data points. 2. **Label Start Index** : This allows users to define the starting point for x-axis labels, giving them more control over how data is presented and enhancing the overall user experience. Let’s delve into these new features and explore how they can elevate your user experience. This option is available in Axes > Category axis > Labels tab of the property editor. See the screenshot below: ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FlVuwbaxJYus5e2fEAH63%252Finterval1.png%3Falt%3Dmedia%26token%3D60d03104-0868-40ea-9a4c-41ae1aaf7327\&width=768\&dpr=4\&quality=100\&sign=5f68b286\&sv=2) Here’s an example to illustrate the Label Interval and Label Start Index settings: We have a dataset with 200 data points and want to ensure that the labels on the x-axis are clearly visible without overcrowding. #### Example Settings: 1. Label Interval: Since we have 200 data points, a suitable label interval would be between 10-15. Setting the interval to 10 means that every 10th label on the x-axis will be displayed. 2. Label Start Index: If we set the Label Start Index to 5, the labels will start displaying from the 5th data point. With the interval set to 10, the labels would be displayed at data points 5, 15, 25, and so on. The x-axis would start showing labels from the 5th data point and continue at every 10th interval. This configuration ensures that the chart remains clear and the labels are not overlapping, making it easier to interpret the data.

Refer to the screenshot below after applying the specified Label Interval and Label Start Index settings.

#### **Impact of Label Interval on Category Label Rendering in Charts** When visualizing large datasets with numerous categories (100+), setting an excessively small interval (e.g., 2 or 3) can lead to suboptimal label rendering. In such cases, Highcharts may struggle to fit all category labels within the chart area, resulting in overlapping labels. To ensure clear and effective visualization, it’s recommended to adjust the label interval based on the dataset size. The relationship between the label interval and dataset size is linear, meaning that as the number of data points increases, the label interval should also increase to maintain chart clarity. For instance: * Datasets with 100+ categories: Use a label interval of 5-10. * Datasets with 200+ categories: Use a label interval of 10-15. * Datasets with 300+ categories: Use a label interval of 15-20. and so on ## Label Width Category axis labels play a key role in helping users interpret the data within a chart. Ensuring the appropriate label width enhances both the clarity and overall visual quality of the chart. To give you greater control over this, a new setting lets you define the width (in pixels) for category labels. This works alongside the existing display options (truncate, wrap, or auto), so you can fine-tune how much of each label is shown, based on your specific layout and readability needs. * **Flexible Truncation Control**: When using truncate or wrap modes, this setting lets you decide how much of the label to show. If default truncation feels too aggressive, increase the width to reveal more text as per your preference. * **User-Controlled Layout:** Instead of relying on a fixed label width (default is 90px), you get the freedom to fine-tune spacing based on your chart's content density or visual needs. This setting can be configured by navigating to: **Axes** > Category Axis > Labels in the chart's property editor. Refer to the screenshots below for a visual reference.

#### **Behavior Changes** With the introduction of the Label Width option, label rendering behavior has been updated: * In earlier versions, label width could not be configured, and truncation was applied implicitly. * With this enhancement, label rendering depends on the configured width: * When Axis Label Display is set to Auto, labels exceeding the defined width (e.g., 56px) will be truncated automatically. * If you prefer not to rely on a fixed width, you can explicitly choose Truncate or Wrap based on your requirement. Refer to the attached screenshots for visual examples. ![](/files/bpLYnYuv5t3cLsQhfqm3) # Background Images **Note** : To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team. ### How to set the Vitara charts’ backdrop images.There are two ways to insert the background image: ### Using a relative path (the image needs to be placed in VitaraCharts folder) ## **Step 1:** Copy the image which you want to set as a background for Vitara charts in the following folder. ``` custom\images ``` ## **Step 2:** Open edit popup window, goto background tab, click on “Enable background image” checkbox. ## **Step 3:** Enter the name of the image with the extension (.png or .jpg) into the text box. Example:

Note: Image name is case sensitive. ## Using Image URL or full path We can directly copy the image web URL or full path in the text box.\ Examples:

We have options like - original/fit to chart/fill chart/custom, to make the image to fit with the Vitara chart. The opacity option can reduce the intensity of the background image on the Vitara chart. Below we can see a screenshot of Stacked Column Chart with a background image.

# Bar/Column Width This option is available in the property editor under the ‘Columns/bars’ tab and is titled Bar/Column width. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXezZb9d6wEAsH1HsbE7YP5HDSnjrqMQ3BVs3s7gFQJKWs52tFdiSnINg4UdiHkWGMy_aIV9y5zj1tu9h9ygM1Uk_dEIxvK6FlHU0e006dRJQS9RKbfYdP2IGNRH7HfmCTmYYfbXYNCN8fQeX0oewZq-PGI?key=HG8zy91NAlh2msPjWJsC0g) \ There is no longer a limit on the width of a bar/column. The width of bars plays a crucial role in highlighting differences between data points and aiding viewers in interpreting the information presented. On one hand, the removal of limitations on bar width provides greater flexibility and customization in chart design. Users now have the freedom to adjust the width of bars according to their preferences, leading to more visually appealing and engaging charts. This enhancement allows for better alignment with specific design requirements and the ability to create charts that effectively convey the intended message. Below is the screenshot of charts with bar width:

# Color Picker with Opacity A new slider is included that allows users to vary the transparency of any specific colour applied to regions where colour opacity can be adjusted as desired. The legends, thresholds, data labels, appearance, tooltip, series, and axes tabs all have this feature. In the example below, we can observe that the ‘revenue’ metric overlaps the ‘cost’ and ‘profit’ metrics, preventing us from seeing past the chart’s overlapping region.

So, from the below image when we adjust the opacity of the ‘revenue’ from Series tab, we can see that the ‘cost’ and ‘profit’ metrics are clearly visible.

# Connect Null Points We have the ability to connect line breaks when there are nulls. When creating a line chart or combination chart, it is important to consider how to handle null points. Null points occur when there is missing data or when a value is not available for a specific point in time. One approach to handling null points is to connect them using a straight line. This can provide a visual representation of the data trend, even when there are gaps in the data. The “connect null points” option is a useful feature that allows users to connect a null object to a specific point in a series of objects or elements. These null points can be frustrating, as they create a visual break in the data and make it difficult to interpret the overall trend. Here, we will explore how to connect those null points in a line chart. By doing so, we can create a more seamless and accurate representation of the data, allowing us to better understand the underlying patterns and insights. So let’s dive in and discover how to bridge those gaps in your line charts. ## **List of charts supports this feature:** * Bar Chart * Column Chart * Stacked Bar Chart * Stacked Column Chart * Line Chart * Area Chart * Tornado Chart * Sparkline Chart The null point connection option is available directly in Line and Area charts, making it simple to use. The new null point connection option is also applicable to other chart types. Simply change the series type to Line or Area to take advantage of this fantastic feature. ## **How to Connect Null Points?** The Series tab contains the Connect Null Points option. By choosing the Series tab and then clicking the “Edit” button, you can see the “connect null points” option in area and line charts directly. We can change other charts to line or area by changing the series type. At that point, you will be able to see the new (connect null points) option. Transform your lines by filling in the gaps with our innovative tool. Enhance data visualization and make your insights more impactful. Try it now!

## Below is the screenshot of charts with Connect Null points Screenshots of the connect null point before and after are provided. The following screenshots demonstrate the effect of enabling the connect null point feature. Users can see what enhancements or modifications occurred as a result of activating this feature by comparing these images. This can be especially helpful for troubleshooting purposes or for evaluating the effectiveness of the connect null point feature in enhancing connectivity and performance. ### **Before enabling connect null points.**

### **See the screenshots below after enabling the connect null points.**

# Custom SVG Markers **Note**: Vitara Charts supports only SVG files as custom markers.To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ### Two simple steps to use custom images as markers: **1. The svg file’s location** The SVG files can be used as custom marker in two ways: **Physical SVG file:** **Step 1:** Copy the images which you want to set as a custom marker in the below folder. ``` \plugins\VitaraCharts\custom\images ``` The paths listed above are merely examples; you must use comparable paths based on your server’s folder structure and the web server you are using. It is necessary to copy the SVG image files to all three of the above locations. **Step 2:** Open the custom marker tab and enter the image name, including the extension ‘.svg’, in the “SVG path” text input box. Then, press the ‘Apply’ button. The custom marker is visible on the chart. Please keep in mind that the image name is case sensitive. #### **Using Web URL:** If you have a web URL for an SVG image file that you wish to use as a custom marker, you can paste it directly into the text input box of the custom marker tab. Then, press the ‘Apply’ button. The custom marker is visible on the chart. There is no need to physically copy the image files anywhere using this procedure.
### **Custom svg markers are visible in my chart, but unable to change the color via series tab or thresholding?** Paths (which inform the browser how to draw the shape) are defined in SVG files. The path might be closed (such a circle, oval, square, or any other shape that makes a closed space) or open. The path may already have a ‘fill’ parameter that specifies how the closed form should be coloured in the svg. So the circumstances under which you can apply a colour to a marker are as follows: 1. The file should contain (at least one) closed shape. 2. The file should not already contain a fill attribute for the closed form. ### **Example with-fill:** In this svg file, the fill property is already specified with Yellow color(#fedb41). ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F9Xeb1o39lCO7qoeJ4lCt%252Fcircle-with-fill.png%3Falt%3Dmedia%26token%3D967e3b52-e108-4952-975c-4f6b282da0f3\&width=768\&dpr=4\&quality=100\&sign=eaccb660\&sv=2) As you can see below, with this type of svg marker you cannot set a color via series/thresholds options. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FiFclSetkGAAI4ZIu1TMP%252FCustomSVG1.png%3Falt%3Dmedia%26token%3Dc72520a0-c1dd-498f-8ad5-9b188e99b221\&width=768\&dpr=4\&quality=100\&sign=7d300157\&sv=2) ### **Example no-fill:** You can see in the below screenshot that this svg marker doesn’t have ‘fill’ property defined. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FKchkpPns3gc6stokTUID%252Fcircle-nofill.png%3Falt%3Dmedia%26token%3D119fe89a-abe8-4ab0-87c8-84906a080ab1\&width=768\&dpr=4\&quality=100\&sign=b2dcded9\&sv=2) So, in vitara charts, you can modify the color of this type of svg markers using either series option or thresholds. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FoXhkvVKXQ8CP1jkWfW7q%252FCustomSVG2.png%3Falt%3Dmedia%26token%3D99e42aaa-c55e-4748-b502-f1b0f9ff8650\&width=768\&dpr=4\&quality=100\&sign=77ea8380\&sv=2) For detailed instructions on how to use custom SVG markers in Vitara Charts, click here for a detailed explanation on [data markers.](https://tsdocs.vitaracharts.com/readme/data-markers) For enhancing category axis labels, data labels, and tooltips with custom markers and colorful visual effects, [click here](https://tsdocs.vitaracharts.com/readme/custom-markers)." # Custom Markers **Note** : To use a specific customization (Custom Markers) in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team. ## The Power of Custom Markers in Charts Welcome to the fascinating world of charts, where numbers transform into vibrant stories! Imagine your chart as a canvas waiting to be painted with colorful insights. In this enchanting journey, we’ll dive into the secret ingredient that makes charts come alive: custom markers. You know those little symbols or icons that add flair to your charts? Those are custom markers! They’re like tiny magicians, bringing a touch of magic to every data point. Today, we’ll explore how these markers work their wonders, starting with the familiar bar and column charts. ## Bar and Column Chart Magic: Custom Markers Enchanting Category Axis Labels, Datalabels, and Tooltips in a Dance of Colorful Data Imagine bar and column charts as vibrant dance floors where labels and data come to life, thanks to our special guests – custom markers. These markers are like the dance partners for our category labels. Every label gets its own unique symbol or icon, turning our chart into a visual feast that’s exciting to look at. But the fun doesn’t stop there! These markers sprinkle a bit of charm on our datalabels too, making the numbers look cool and friendly. And guess what? When you hover over a bar or column, it’s like lifting the curtain on a surprise party – tooltips pop up with extra secrets, adding an interactive spark to our chart. Now, let’s dive a bit deeper into the magic happening in our chart. In this dance of labels and datalabels, custom markers act like artistic decorations, making each label a special character and turning boring numbers into something cool and friendly. It’s not just about showing data; it’s like telling a story with every move on the dance floor of our chart. And here’s where the chart becomes even more exciting. When you hover over a bar or column – it’s like waving a magic wand – tooltips appear with extra details. This makes our chart not just a picture but a lively experience. You can explore, discover, and interact with the data, making it more than just numbers on a page. So, in our bar and column chart party, custom markers are the cool dancers making labels and data look awesome. They turn our chart into a colorful, interactive dance floor where every move tells a story, and every detail is a surprise waiting to be uncovered. Cool, right? That’s the magic of custom markers in our chart dance party! ## **Exploring Custom Markers in Bar and Column Charts: A Step-by-Step Guide** Follow these simple steps in the property editor to infuse your charts with a personalized touch: 1. Bar and Column Charts: Personalizing Category Axis Labels * Open the Property Editor for your bar or column chart. * Navigate to the ‘Axes’ tab and select the ‘Category Axis’ section. * Identify the ‘Label’ dropzone under the ‘Category Axis.’ * Add your chosen custom markers to infuse visual appeal into category axis labels. * ```

``` ```

``` 1. Tooltip Customization: Adding Insights to Data Points * In the Property Editor, locate the ‘Tooltip’ section specific to your chart type. * Find the dropzone designated for custom markers within the ‘Tooltip’ section.

* Seamlessly integrate custom markers to provide additional insights when users hover over data points.

1. Datalabels Enhancement: Bringing Numbers to Life * Navigate to the ‘Datalabels’ section in the Property Editor. * Identify the dropzone dedicated to custom markers under ‘Datalabels.’

* Add custom markers to turn plain numbers into visually enriched elements, enhancing the storytelling aspect of your chart.

## The Symphony Continues: Unveiling the Versatility of Custom Markers Across Various Chart Types Welcome to the world of data visualization, where custom markers enhance the look of your charts. Let’s start by pointing out a key detail: In bar and column charts, these markers shine on the category axis, tooltips, and data labels. Now, as we explore other Vitara chart types like line charts, stacked column, waterfall charts, and simple kpi charts, it’s important to know that custom markers take a slightly different approach. Unlike their versatile role in bar and column charts, you’ll find these markers working their magic mainly in tooltips and data labels for these other charts. This distinction helps us understand how custom markers play out across various chart types. So, let’s dive into the details and see how these markers bring a special touch to different elements of your visualizations. ## **Line Chart: Guiding Trends with Visual Milestones** In the realm of line charts, custom markers act as guiding beacons along plotted trends. Each marker becomes a visual milestone, adding a layer of depth and engagement to the interpretation of data points.

## **Stacked Column Chart: Visual Signposts Through Layered Data** Navigating through the layers of stacked column charts becomes more intuitive with custom markers. They act as visual signposts, guiding viewers through the intricate layers and enhancing the clarity of data interpretation in tooltips and datalabels.

## **Waterfall Chart: Adding Splash to Data Narratives** In waterfall charts, custom markers contribute to the narrative by adding a splash of distinction to data points. They transform tooltips and datalabels into expressive elements, turning the chart into a visual story of changing values.

## **Simple KPI: Custom Markers as Dynamic Storytellers** Even in simple KPI charts, custom markers play a dynamic role in storytelling. They turn tooltips and datalabels into visual narratives, making key performance indicators more engaging and insightful.

## **Spark Line: Tiny Trends with Big Impact** Even in the compact space of spark lines, custom markers make a big impact. They turn tooltips and datalabels into concise yet powerful narratives, revealing tiny trends with significant insights. ## **Dumbbell Chart: Visual Bridges Between Data Points** Dumbbell charts benefit from the visual bridges created by custom markers. They enhance tooltips and datalabels, turning the chart into a journey of connections between data points. ## **Packed Bubble: Adding Depth to Bubble Narratives** Custom markers in packed bubble charts add depth to bubble narratives. They enrich tooltips and datalabels, making each bubble more than just a point but a visual story within the larger context. ## **Slope Chart: Navigating Trends with Grace** Slope charts gracefully navigate trends with the support of custom markers. They transform tooltips and datalabels into visual guides, making the journey through data points more meaningful and delightful. As we transition to additional supported charts, including Column, Pie,Tornado, Grid, Angular Gauge,Area Chart,Waffle Chart, Stacked Bar, and Funnel, the custom markers continue to enhance the visual narrative. Whether it’s providing visual landmarks, turning dots into expressive stories, or infusing slices with distinctive identities, custom markers consistently elevate the storytelling potential of each chart type, making the exploration and interpretation of data a truly immersive experience. # Data Markers 1. In traditional charts, data points are represented by bars and lines. Users of Vitara charts will be able to utilise markers to indicate the data points . 2. The markers menu offers a selection of data markers that you can choose from, or you can upload your own custom markers. 3. The bar, column, line, area, sparkline, and grid charts all have the data markers feature. ## **The following section will explain how to show a marker on the bar chart instead of bars.** In the vitara bar chart click on ‘Edit’ button to open the properties window.

\ In the properties window open the ‘Series’ menu. Click on ‘Edit’ for the series on which you want to show the data markers.

Expnad the ‘Type’ drop down box, and select the option ‘Data Markers’. When we select the option ‘Data Markers’, the series window will display all the options related to data markers.

In the below screenshot the basic properties of the data markers like **marker selection, marker color and marker size** are highlighted.

## **Marker Type, Marker Size and Marker Color** Click on the marker icon to open the marker selection window. Please refer to the below screenshot.

\ \ After selecting the desired marker close the marker selection window. Select the size of the marker and color.

\ \ Below is the screenshot of bar chart in which the bars are replaced with marker.

## **Keep aspect ratio** When we enable data markers, we will see one marker for each data point. The position of the data marker is determined by the data point’s value. If we disable the Keep aspect ratio attribute, the data marker will be stretched to fill the space between the axis origin, i.e. 0, and the data point value.

Below is the screenshot of how the data markers looks when we disable **Keep Aspect ratio** property.

## **Repeat Marker** In normal mode, one data marker is displayed for each data point. The data markers will be generated from a bar/column shape filled with markers when the Repeat Marker attribute is used. The marker will be filled with a certain number of rows inside each bar.

Enable the check box **Repeat Marker**.

Select number of units per row. Click on apply.

**Fill** If we choose **fill** mode, the data markers will be filled with a color depending on the value we set as Maximum value (while the marker size remains the same for all data points).

## **Data markers as scatter chart** We could use the choices in the series tab to construct the scatter chart. We may now use the “Data Markers” option to create scatter plots. The series-type drop down box will appear like this .

Below are the steps to implement the scatter chart using the Vitara charts .\ **Step 1:** Use a Vitara Bar/column chart. **Step 2:** In the “Appearance” tab, enable the option “Overlay Bar/Column”.

**Step 3:** Open the “Series” tab and for the metric which you want to show as a simple tick, click on ‘Edit’.

**Step 4:** Select the series type as “Data Markers”.

**Step 5:** When we select the option ‘Data Markers’, the series window will display all the options related to data markers.

**Step 6:** Click on “Apply” button.

**Note** : To use a specific customization (Custom SVG Markers) in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team. ## Custom SVG Markers A new feature has been added to the vitara charts, allowing users to customise the data markers. This implies that the user can upload a local svg file to the server and use it as a data marker in Vitara charts. Custom svg markers can be used in the attributes of the following vitara charts: ``` Series tab, Markers tab, and Thresholds tab. ``` This feature is supported in the below charts.\ **Area, Bar Bullet, Column, Dumbbell, Line, Simple KPI, Slope, Sparkline, Tornado,** and **Waffle**. Custom SVG markers can be used in the thresholds . The user can then submit the .svg file to the server and use it as a data marker in the Vitara Grid display.

Lets see how to use custom markers in the below steps. For better understanding of the process, we will consider the custom svg file as ‘**car.svg**’ in this example **Step 1:**\ Upload an svg file \[**car.svg** in this case] into the server . **Step 2:**\ Create any chart \[line chart for example] that supports custom svg markers. Go to the marker tab, enable marker and click the ‘**marker type**’ icon, then the marker selection window will be opened. See the screenshot below.

**Step 3:**\ Go to the **Custom** tab. Enter the name of the file in the **SVG path** textbox \[e.g, car.svg(name is case sensitive)] and click on ‘Apply’ and close the marked selection window. See the screenshot below

Then the custom svg marker\[**car**] gets applied on the chart. see screenshot below

In this way, the custom markers can be applied from the Series tab and Thresholds tab as well. ## Custom SVG markers in Data Labels Custom svg markers are supported in data labels generated by thresholds, and various svg markers can be used to make the data labels more presentable to the applicable threshold.

The example below shows how to use ‘sun.svg’ as a custom marker on the threshold with data labels enabled.

# Data label customization #### Use Metric Formatting When we activate data labels in any of the Vitara charts, the data labels are displayed in shortened format by default.

To show the data labels in the same format as the metric’s data format, pick the Use Metric Formatting option from the data labels menu. The screenshot below was taken after enabling the Use Metric Formatting option.

#### **If the metric’s data don’t have currency symbols, then how to display currency symbols in the data labels.** Lets consider the data as shown in the below screenshot. Here the Metric Cost does not have dollar sign.

If we wish to display this data using vitara charts and include the dollar symbol in the data labels, we must first add the dollar sign to the data.Edit the metric’s number format in the TS and select the appropriate format.

Now apply vitara chart, for example, vitara column chart.

When we enable data labels, by default vitara chart will display data labels in its own format i.e. short format. If we want to the values in this format we have to enable the *use metric formatting* option.

Below is the screenshot of the vitara column chart after enabling the *use metric formatting*. Now we can see the dollar sign in the data labels. \ **Note:** When we enable the *use metric formatting* option in the data labels menu, the tooltip also will be displayed in the same format as the data labels.

## **Display axis labels in number format.** To display axis labels in number format, first activate the utilize metric formatting option in the data labels menu, and then enable it in the axis labels menu. The screenshot below shows how to enable metric formatting in the axis labels menu.

## Data label customization We can modify the default data labels using text and dynamic macros for data. Below is the screenshot of the data labels editor window.

Hover the cursor over the ‘i’ symbol to see the available macros for any particular chart. Below is the screenshot.

Starting from version 5.3.10, macro suggestions are displayed with a new look. Refer to the screenshot below. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fm0O474C2L6EIhpt3akrF%252Funknown.png%3Falt%3Dmedia%26token%3D56e5934f-9f91-4c8d-b9d9-bfe965c1e721\&width=300\&dpr=3\&quality=100\&sign=75c037f\&sv=2) In the editor window type ‘&’ character and you will see macro suggestions. Select the macros and click on ‘“Apply” tab. For example, the default macros in the above screenshot is &\[point.value], So the chart shows the metric value at each data-point. See the screenshot below:

Now we will use custom macros in this way &\[point.metricName]: &\[point.value], point.metricname is colored red. And the data labels will display this way now. See the screenshot below:

In this way, users can use either text or other macros or combination of both in many possible ways. ## Show Overlapping Data Labels All vitara charts are added with the support to show the overlapping data labels. This feature is added in data labels tab with ‘Show Overlapping Labels’ checkbox.

For example, in line chart when you enable data labels, only few labels are shown on the chart respective to the space available between the datapoints. See the screenshot below:

Now, the new feature allows to forcefully show all the data labels. To do this, go to data labels tab and enable the ‘Show Overlapping Labels’ checkbox. See the screenshot below:

### Label display Format Three label display formats are available. The reference screenshot is provided below ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FMbHmmaEaUHVTAc96wGUm%252Funknown.png%3Falt%3Dmedia%26token%3D84949888-654e-41fc-a42a-318b853bd8c7\&width=300\&dpr=3\&quality=100\&sign=4e3f058d\&sv=2) # Download Answers ## Download Answers as PNG files In the ThoughtSpot environment, you can download answers as PNG files. This can be done for individual answers created independently or for those pinned to liveboards. Follow these steps to download an answer as a PNG: ## **Downloading Individual Answers** 1. Create an Answer: Use any of the Vitara charts to create your answer. On the answer, click the “More” option on the right side. 2. Select Download Option: From the drop-down menu, choose the download option.

3. Choose PNG Format: A pop-up window will appear with three options. Select “PNG” to download your answer, which will display your chart.

## **Downloading Answers from a Liveboard** 1. Open the Liveboard: Navigate to the liveboard containing the answers you want to download. 2. Select the Answer: Choose the specific answer you want to download and click the “More” option.

Follow the same steps as mentioned above to download the answer as a PNG. By following these steps, you can easily download and share your visual data from ThoughtSpot. # Error Bars Error bars are a graphical representation of the variability of data and are used on graphs to indicate the error, or uncertainty in a reported measurement. Currently, Vitara charts supports error bars in the following charts. 1. Vitara Bar Chart 2. Vitara Column Chart 3. Vitara Line Chart 4. Vitara Sparkline Chart ## How to set error bars in the vitara charts. To set error bars in vitara charts, we need three metrics. One is the basis measure for which the error bars are calculated. ‘Error-Low Value’ and ‘Error-High Value’ are the other two measures. ## Example: Consider the following example: the open and closing values of the Amazon.com, Inc. stock price for the month of November 2019. I’d want to show the day’s high and low values as error bars on the close value measure. The following attributes and metrics are utilised in the example: **Attributes:** 1.Date **Metrics:** 1.Open ($), 2.Close ($), 3.Day High ($), 4.Day Low ($). ### **Step 1:** Insert a Vitara bar, column, or line chart as needed. In this example, I used a Vitara column chart. First, I added the metrics **Open ($)** and **Close ($)** to the chart.

I’d like to display the error bars on the **Close ($)** metric’s bars. Insert the Day High ($) and Day Low ($) metrics into the **Tooltip** dropzone. The metric **Day Low** ($) should be set as the error bar’s low value, and the metric **Day High** ($) should be set as the error bar’s high value. ## **Step 2:** To reveal the Edit button, move the cursor over the Vitara chart. To access the properties pane, click on the Edit button. Open the Series menu in the properties pane. In basic terms, the series properties will be set up via the Series menu. This indicates the type of chart used to draw the series, the color of the series, and the axis for this series—primary/secondary—for a certain metric. Edit the series properties for the measure for which you want to configure the error bars in the Series menu. For the metric Close ($) in the present example, click Edit.

### **Step 3:** In the series properties there is a check box **Show Error Bars**. Click on this check box to enable **Error Bars** in the chart.

## **Step 4:** When error bars are enabled, the drop-down list boxes to set low and high values for error bars appear in the series properties menu. Select the measurements you wish to designate as low and high values by expanding the drop-down list. then decide on the error bar’s color. Finally, press the Apply button.

Below is the screenshot of Vitara colum chart showing error bars on the metric **Close ($)**.

For the same example, below is the screenshot of the vitara line chart showing error bars.

# Export to PDF. ## Download a Liveboard as a PDF Downloading a Liveboard as a PDF is a convenient way to save and share comprehensive visual data without the need to download each visualization separately. By following a few simple steps, you can generate a PDF that either mirrors the layout of the Liveboard or presents each visualization individually. Here’s how you can do it: * Navigate to the top menu and click on “Liveboards.” * From the list, choose the desired Liveboard by clicking its title.

* Once the Liveboard opens, click on the “More options” menu. * Select “Download PDF.” In the download window, you’ll have two main format options: ## **Liveboard: This option generates a PDF that consolidates multiple visual answers onto the same page, replicating the layout seen on the Liveboard.** * Under Format, select Liveboard. * Under Layout, choose either the Landscape or Portrait page orientation. * Click on Download.

## **Visualizations: This option creates a PDF with each visualization on a separate page.** * Under Format, select Visualizations. * Under Layout, choose either the Landscape or Portrait page orientation. * Under Content, specify if you want the table visuals to end after filling the whole page by selecting the Truncate Tables option. * Under Visualizations, select the visualizations you want to include in the PDF. Deselect any visualizations you do not want. If your Liveboard has tabs, you can also select or deselect tabs to include in the PDF. * Select Download.

# Formatting metric data Customize the display of numbers in tables and charts by defining their format. This feature allows you to adjust decimal places based on your data modeling preferences, offering various supported number formats, including delimiters. For integer data types like INT and BIGINT, use #,###, which only accepts numerical values without alpha characters. For decimal data types such as DOUBLE and FLOAT, use #,###.00, supporting numerical values up to two decimal places. These are some examples of formats you can use: | Stored Value | Format Pattern | Display Value | | ------------ | -------------- | ------------- | | 12345.6789 | #,##0.## | 12,345.68 | | 12345.6789 | #,##0.### | 12,345.679 | | 12345.6789 | #,##0.00000 | 12,345.67890 | | 12345.6789 | #,##0 | 12,346 | | 12345.6789 | #,##0.00 | 12,345.68 | | 12345 | #,##0.## | 12,345 | | 12345 | #,##0.00 | 12,345.00 | | .12 | #\\% | 12% | | .12 | #.00\\% | 12.00% | | .1234 | #.##\\% | 12.34% | You can apply number formatting in ThoughtSpot in two ways: ## **Using Data Options** * Select the worksheet where you want to apply number formatting. * Open the worksheet and locate the column named “Format Pattern.” * Enter the desired format pattern to modify measures and save the changes.

## **During Answer Creation** * From the search tab, create an answer using attributes and measures in table format. * Apply number formatting to measures. * Clicking on any metric formatting option on the right-hand side opens the ‘Edit Chart Configuration’ settings. Here, you can adjust the number formatting settings for your data.

## Number formatting You can format the numbers in any table column based on a measure.This functionality allows you to change the category (number, percentage, or currency), units (auto, none, thousand, million, billion, or trillion), or method of writing negative values (-1234, 1234-, or (1234)). ### To change the number formatting: You can reach the Edit panel from the more icon that appears when you hover over a column name: 1. Under number formatting, you can edit the category, units, or method of writing negative values. Open the dropdown menus to select new values.

#### Example To display the measure in thousands with one decimal point, select 'Thousand' as the unit and set 'Decimals' to 1. The screenshot below shows the result after applying these changes."

Now Apply any Vitara Chart ,example Vitara Column Chart \ ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfyT3yLG2eI3i0p19xlPukfplMdX6eNdTg4ObehKhA2oaSlYiNWMh9jOPbUeyVEWuLECWqLsGKJs4r5d6HHRLPbc3l-X_PcGeOslWgryyYXklXtwDXlk57zcZCkZmf1avzkhZel?key=zRKIQnLOkaNPpynuXhqEaw) By default ,Vitara charts will display data labels in its own format i.e. short format. If we want to the values in this format we have to enable the use metric formatting option from data labels tab and Axes tab

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdAVoSUlYMQfoh5tLUVEDKuR4RUNlRZeW44bOmPVRVVq4znH2xfz3Qpuu8noQiWIWKXkMYUz8TUDm8XgPaOPJkKGMEzXQDxbgyPnAO9bwWfQEIFB6yWmXZmY6IZWsvgOhuyL1gP?key=zRKIQnLOkaNPpynuXhqEaw) Below is the screenshot of the Vitara Column Chart after enabling 'Use Metric Formatting'. The applied formatting is now visible in the data labels, tooltip, and axes.

**Note:** *When the 'Use Metric Formatting' option is enabled in the Data Labels menu, the tooltip will also display values in the same format as the data labels* ## Applying Currency Formatting in ThoughtSpot You can apply currency formatting in ThoughtSpot through two methods: ### **1. Using Data Options (Data Level)** * Navigate to the Data tab and select the worksheet where you want to apply the currency format. * Open the worksheet and locate the desired column. * In the "Currency" field, Choose the appropriate currency symbol or code (e.g., $, €, ₹) based on your requirement . * Save the changes to apply the currency format at the data level.\

\ This approach ensures consistent currency formatting across all answers using this worksheet. #### **2. During Answer Creation (Chart Level)** * Go to the Search tab and create an answer using attributes and measures, Select the metric (measure) to which you want to apply currency formatting. * In the configuration options, navigate to Number Format → Currency, and choose the desired currency symbol or format.\ \ This method is useful when you want to customize currency formatting for specific answers or visualizations. Please refer to the [Data Label Customization](https://tsdocs.vitaracharts.com/readme/data-label-customization) section for detailed steps. ## Percentage Formatting's When a metric is formatted as a percentage, VitaraCharts automatically displays the data as percentage values. Any aggregations applied through the chart menus will honor this formatting. All relevant chart elements—such as data labels, axis labels, totals, and tooltips—will consistently display values in the correct percentage format.

Now, apply any Vitara chart—for example, the Vitara Column Chart—to visualize the data with the specified percentage formatting

\
# Gradient Threshold A new threshold condition called ‘Gradient threshold’ is added to the following charts in the threshold’s properties : Bar, Stacked Bar, Column, Stacked Column, Line, Area, Bubble, Tornado, Sparkline, Column range, Bullet, Mekko, Dumbbell, Slope, Angular Gauge, and Sankey chart. Gradient thresholds with the required number of stops are applied between two colors. Gradient thresholds are applied to Attributes and Metrics with the Start and End colors based on the Target and Source settings. Click on the Edit Button→ Thresholds Button→ We can set Gradient Thresholds through conditions. Examples for Gradient Threshold: 1. In the below screenshot, for the Angular Gauge Chart, we applied the Gradient threshold on Background Bar, and Red as Start color and Yellow as End color, with 5 Stops.

2 . In the below screenshot, in the Dumbbell chart, we applied Target and Source as Cost, and applied Gradient threshold condition, with alias name and number of stops at 4.

# Gradient Color Users are now able to interact with and modify the charts in their own special ways to make them appear more appealing since the gradient colour function was added to the Vitara charts. ## Steps to enable Gradient Color feature in dossier: Gradient color feature is available in the following charts: area/line , tornado, bar/column, stacked column/bar ,pie and sparkline. Gradient color fill can be added where the series property is available. It can be enabled by selecting options from the series tab for individual series.

It will show the color palette, which will have two selection handles to choose two colors that will render from beginning to end on the series. (From left to right)

# Invert Axis The Invert Axes option is supported for Column Range, Waterfall, Dumbbell, Bullet, and Sankey charts. This option is available in the Appearance tab of the chart. By enabling or disabling the Invert Axes option, users can switch the chart orientation between horizontal and vertical, depending on their requirements Dumbbell ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F3O5K52OQmlXSLmHt2wTA%252Funknown.png%3Falt%3Dmedia%26token%3D9e1c2e32-3f25-4769-8486-67439c520a39\&width=300\&dpr=3\&quality=100\&sign=e14b8909\&sv=2) Sankey Chart Vertically ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FgmLJfn2Zx5XMuyAH8aSL%252Funknown.png%3Falt%3Dmedia%26token%3Da69e4b96-9941-4009-97a3-34c8eb128e7b\&width=300\&dpr=3\&quality=100\&sign=a91aa7ca\&sv=2) # Legend ## Legend The user can interact with legend elements in VitaraCharts to show, hide, or highlight specific category data inside the chart. Except for the ‘Packed bubble’, ‘Waffle’, ‘Calendar heatmap’, and ‘Mekko’ charts, all vitara charts with legend enable this interactive feature. VitaraCharts may allow two types of interactions. ## **1. Click to hide** If the chart has three legend items that reflect three separate data categories, and you need to hide/exclude specific categories from the chart, simply click on that legend element. The screenshot below, for example, illustrates a bar chart with three metrics: profit, cost, and revenue. These three metrics are shown by three different colours on the graph.

\ We will now hide the metrics ‘revenue’ and ‘profit’ from the chart in order to analyze the data exclusively for ‘cost’. To do so, select the legend elements ‘revenue’ and ‘profit’. Take a look at the image below:

\ Once the data has been hidden, the hidden legend category names will be deactivated with grey text. If we need to see the data for’revenue’ and ‘profit’ again, simply click on the corresponding legend parts again. ## **2. Hover to highlight** When you hover your cursor over one of the legend categories, the data for that category is highlighted, and all other legend categories on the chart are presented with less opacity. For example, when we hover over the profit legend category, the colour bars for’revenue’ and ‘cost’ become less opaque. Take a look at the image below:

### Formatting capabilities We’ve implemented a new feature that lets you format text for legends . Compact Fit, Max Width, and Trim are the new options added to the legends tab. 1.Compact Fit: This setting minimises the padding between symbols and legend text as well as the space between each legend. It is enabled by default.

2.Max width: will be used to adjust the legend width…if the text is too long, it will wrap to the next line.

3.Trim - when combined with the Max-width option, the overflowing text is trimmed into ellipsis (“…”).

# Negative Sign ## Negative Sign Customization in Vitara Charts In ThoughtSpot, you have the option to display negative metrics/measures in three different formats. This option can be enabled from the number formatting options, primarily used to display negative values in brackets. ## **Enabling Negative Value Formatting** To enable this option when creating a new answer from the table format: * Access Number Formatting: Navigate to the number formatting options. * Adjust Settings: Change the setting for ‘Category’ to ‘Number.’ * Format Negative Values: Specify the format for negative values according to your preference. Here is a screenshot illustrating this process:

Create a Vitara chart from the TS Table view . Hover your mouse over the Vitara chart. The Edit button will appear on the chart. To open the Vitara charts properties window, click the Edit button. Navigate to the Data Labels menu. There will be a Metric Format drop-down box in the Data Labels menu. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FOIunqgtbl4sSEGjwab4G%252FnegativeSignFormat1.png%3Falt%3Dmedia%26token%3Dceb5d55a-0876-4418-8488-4271cb10e612\&width=768\&dpr=4\&quality=100\&sign=172a9585\&sv=2) Expand this drop-down box and select the option *Use Metric Formatting*. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FpboK9N6hw1awYcl1md8A%252FnegativeSignFormat2.png%3Falt%3Dmedia%26token%3De40f5619-5372-4fc9-bddd-7ff90eae3ca1\&width=768\&dpr=4\&quality=100\&sign=24f6c9ba\&sv=2) When we choose Use Metric Formatting, the data labels and tooltips in Vitara charts are displayed in the same format as in ThoughtSpot.

This means that if we choose Use Metric Formatting, the sign of negative numbers in Vitara charts will match the sign . ### Negative sign customization in the Shortened Format: **Note:** Before modifying the negative signs using this method, the Metric Formatting option in the data labels menu must be set to Shortened Format (as shown in the screenshot below). ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FeASYqNOzgmWMcAWIY0bq%252FnegativeSignFormat5.png%3Falt%3Dmedia%26token%3D17f511ae-2c21-443b-a047-e645b97ddd19\&width=768\&dpr=4\&quality=100\&sign=b47d2e7d\&sv=2) Vitara charts will display the numbers in the abbreviated format by default. If I wish to show the numbers in a reduced format (Vitara Charts’ default format) and customise the negative sign, I must configure the Vitara Charts’ global.txt file. \ **Note** : **" *****To use this specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team."*** The three instances listed below show how we can customise the Vitara Charts to display a negative sign in a reduced numerical format. Show the default sign. Show a negative symbol. Show parenthesis. We must configure the global.txt file to meet our needs. The global.txt file can be found at the following path. **\plugins\VitaraCharts\custom** #### Notations used for negative sign customization: ``` 0 display negative numbers with minus sign, 1 display negative numbers in parenthesis. ``` Fill in the below line of the global.txt file with -1, 0, or 1. “metricNegativeValueFormat=-1” For example, in the vitara charts, if I want to show negative numbers in the paranthesis must enter a 1 in the global.txt file. “metricNegativeValueFormat=1” The global.txt file customizations can be used to regulate the negative indications in all VitaraCharts. In contrast, the Use Metric Formatting property in a certain chart’s Data Labels menu is used to control the negative sign in that specific chart in that unique Visualization. # Pattern Fill ### Pattern Fill Option in the ‘Series’ tab. Pattern fill feature is available in the following charts: area/line , tornado, bar/column, stacked column/bar, pie and sparkline.These charts have the Pattern fill option (Grid/Square/Double Square/Slash) in the Series tab, which allows us to display data in a more presentable manner.

## Pattern Fill Option in the ‘Threshold’ tab. Using pattern fill in thresholds, certain part of the chart can be filled with a pattern. The following charts support this feature: Area/line, tornado, bar/column, stacked column/bar, dumbbell, slope, bubble, pie and sparkline.

# Play Animation The option ‘Play By First Attribute’ causes Vitara charts to display the chart for each element of the first attribute at a specific time instant. We can take a break at any time. Note:To enable the ‘Play Animation’ option, at least two attributes must be present in the chart. ## Steps to enable ‘Play Animation’ feature in dossiers: Drag the ‘Play Axis’ attribute you want to apply into the ‘Play Axis’ drop zone. Drag one of the attributes into the ‘Play Axis’ drop zone to enable the ‘Play Animation’ feature. In the above example, I used the month attribute as the play axis.

Click on play button to run the ‘Play Animation’ feature. ## Customizing Play Animation We can modify the speed of the play axis upto 0.5X, 1.0X, 1.5X,2.0X. If we want the play axis to play continuously, we can enable the Loop option. Click on the settings button which is right edge of the play axis. Select the speed required.

## Retain Points Retain point (First,Last but one) feature now moved under Play Axis tab which can be accessed from property editor window. When we select the ‘First’ option under retain point, the first elements are displayed in comparison to the final elements.\ The “Last but one” will similarly compare the final element with the play sequence’s last element.

This feature can be used to compare the trend in the play animation. ## **The following vitara charts supports play animation feature:** Bar chart, column chart, pie chart, line chart, area chart, bubble chart, tornado chart, spark line chart, funnel chart, column range chart, and bullet chart. ## **The following charts don’t support play animation feature:** Stacked bar/column, Simple KPI, Grid, Waffle, Slope chart, Dumbbell and Angular Gauge. # Plot lines/Reference lines **Note**: Plotlines can be drawn using attributes . All the attributes and data in the chart are listed in the source drop-down box in the plotline editor window. We can choose a source attribute and specify a plotline condition. Line, area, sparkline, bar, column, stacked bar, stacked column, tornado, slope and dumbbell charts are among the charts that contain this functionality. Select the measure you wish to base your plotline on from the’source’ drop-down menu under the ‘Plot Lines’ tab in the property editor window. The plotline editor is seen in the screenshot below. The’source’ drop down box will show attributes added to the category axis drop zone, metrics added to the value drop zone, and metrics added to the tooltip drop zone. As the source, choose an attribute or measure.

Apply the conditions like min, max, avg, first, last, and percentile. Apart from these fixed conditions, you can give a particular value as input at which you want to draw a plot line.

You can apply colors to plot line, change the plot line width, change the style of the line and title to the plot line. At last click on the ‘Apply’ button.

The bubble chart now supports plotlines on the vertical axis in version 3.8. Please see the screenshot below, which displays plot lines and reference lines on the horizontal and vertical axes.

### Thresholds based on ‘Plot Lines/Reference Lines’: Plot lines/Reference lines can be used in the ‘source’ field in thresholds.

When we set the plot line in any Vitara chart, the name of the plot line appears in the thresholds tab’s source field. In the thresholds, we can provide plot lines as a source. When we specify a plot line as the ‘Source’ in a threshold, we can include the condition ‘Above the line’ or ‘Below the line’ in the threshold.

A screenshot of a bubble chart with two thresholds applied based on the storyline “Plot line1: Avg of Revenue” is shown below. The first threshold is based on the criterion ‘above the plotline, set bubble color as green,’ and the second threshold is based on the condition ‘below the plotline, set bubble color as red.’

#### **Slope Plotline** We have the “plot line” feature in a bubble chart is used to show lines that are either vertical or horizontal or other directions as well and act as reference points. In addition to helping with data visualization and comparison, these lines can represent thresholds, averages, or other data points. This allows users to evaluate how individual data points relate to particular standards or values. Plotline orientation will be displayed in both horizontal and vertical directions (exclusive to bubble charts) especially 45 degrees. When you click on the slope option in the property editor’s plotline orientation dropdown, the other dropdown will be disabled and the input text will appear. You must enter a slope value between the chart’s maximum value (e.g., 0.1, 0.2, etc.) based on the chart’s values. The chart editor menu’s “Plot line” tab will provide access to this capability. When adding slope, horizontal or vertical orientation to the bubble chart’s plot line, users can access this tab. The ‘Source’ and ‘Target condition’ become constrained when we add orientation directly as ‘Slope’ under the “Plot line” tab. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F7rE5gLmlJQdqHL11rSE2%252FbubbleSlope1.png%3Falt%3Dmedia%26token%3D3f14d5e6-c80d-4c96-bac4-38071f894e2a\&width=768\&dpr=4\&quality=100\&sign=9607ffad\&sv=2)![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fg9DzeqMBNloY8mvpTwi1%252FbubbleSlope.png%3Falt%3Dmedia%26token%3Df098d7f2-cba3-451b-b783-407e03f50f6e\&width=768\&dpr=4\&quality=100\&sign=462c6c19\&sv=2) # Reset color property ## Resetting color property In Vitara charts, a color picker is used to assign colors to fonts, markers, series, and so on. Assume we change the color of one of the series on a chart to ‘red’ (#ff0000). Take a look at the screenshot.

Now to reset this series color to ‘Auto’ i.e. to the default color, just remove the color for that series as in the screenshot below:

The color attributes of the color palette, thresholds, chart backdrop, series, label, line, and marker colors can all be reset in this way. # Reset font properties ### Resetting font properties Most font properties in Vitara Charts’ Property editor are set to ‘Auto’ by default. Let’s look at how to reset the font settings to ‘Auto’ after manually providing them in this document. Font features such as ‘font-family’ and ‘font-size’ are particularly important. #### 1. Font family Font family can be applied to Axes, Data labels, Tooltip text, Legend labels, and other elements. Assume we change the font family of some text in a chart to ‘Times New Roman’, as shown in the screenshot below:

Now to set back this font family property to ‘Auto’, then just set it to Select from the Labels dropdown as shown in the screenshot below:

#### 2. Font size Almost all labels in a chart, including axes, data labels, tooltip text, legend labels, and series width, can have the font size property set. Assume we set the Data labels size in a chart to ‘14’, as shown in the screenshot below:

Now to reset the data labels size to ‘Auto’, just make the font size textbox empty\[select and clear the font size number using backspace]. See the screenshot below:

# Right Click Menu In ThoughtSpot, the right-click menu provides several options to enhance data analysis: * Exclude Data Points: Allows users to exclude specific data points from the current analysis. For example, if you create a chart using measures such as Attribute - Category, Measure - Cost, and Revenue, you can right-click on a data point like “Book” to exclude it. This action removes the “Book” data point from the chart, allowing you to focus on and visualize other data points instead.

* Include Data Points: Enables inclusion of selected data points for detailed examination. In the example, a chart was created using measures like Attribute - Category, Measure - Cost, and Revenue. When you right-click on “Book,” you can choose to include only this specific data point. This action filters the chart to display only the data related to “Book,” excluding all other data points.

* Drill Down: Facilitates deeper insights by allowing users to drill down into charts based on selected measures. In the example, a chart was created using measures such as Attribute - Category, Measure - Cost, and Revenue. When you right-click on “Book,” you can drill down to explore the specific measures used in the chart.

When drilling down into any measure, you will be redirected to ThoughtSpot’s default chart, as this is the expected behavior. To navigate back or forward one step at a time, use the in-product back button located beside the search bar.

**Drill Down within a Liveboard** When you drill down on an Answer within a ThoughtSpot Liveboard, the process mirrors drilling down on the Answer itself. This allows you to delve deeper into specific data insights directly within your dashboard environment. This clarification emphasizes the seamless continuity between exploring detailed data within Answers and navigating through Liveboards in ThoughtSpot. Navigate back step-by-step using the in-product back button. The reset icon is conveniently integrated into the back button dropdown menu, allowing you to easily return to the original Answer after drilling down.

Additionally, we offer the option to access underlying data in right click menu, where you can review the attributes, measure values, and other data used in your chart.

There’s also an option to edit measure names.

#### **Right-Click Menu Supported Charts** Bar, Column, Line, Sparkline, Slope, Area, Stacked Bar, Stacked Column, Dumbbell, Tornado, Funnel, Pie, Angular Gauge, Waffle, Grid ,Bubble, Bullet, KPI Ring, Waterfall, Sankey ,Column Range. **Right-Click Menu Unsupported Charts** KPI animation, circle packing and simple KPI
# Right-to-left Support **Note** : To use this specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team. #### Right to Left (RTL) Language Support Vitara Charts supports scripts written from right to left. Arabic, Hebrew, Persian/Farsi, and Urdu are among the languages that utilize right to left scripts. **Controlling the option** The use of RTL is a system-wide option. It will be reflected on all Vitara charts once we activate it. Take note of the following line in the ‘global.txt’ file: Copy ``` #rtlSupport=true ``` By default, the option is commented out. Simply remove the ‘#’ character from the preceding line to enable RTL data display. **Grid and Micro Charts** RTL format is commonly used in grid and micro charts. The following adjustments were done to Grid/Micro charts in order to properly support RTL format: Headers: Attributes will be listed on the right side of the grid, while metrics will be listed on the left. Context menu - Text order and indication arrows ‘>’: The text appears on the right side, while the arrow option appears on the left. By default, all columns (including grouped column text) are right justified. Threshold values have markers to the right of the marker and values to the left of the marker. Threshold bars are ordered from right to left (vertical axis on the right). Trend lines in micro charts begin on the right (for all; bar, column, and bullet). Manage column group menu now have draggable elements on the right and the drop area is on the left. **Cartesian Charts** By default, the horizontal axis in all cartesian charts will grow from right to left. The vertical axis remains the same (it grows from bottom to top). **Grid layout Charts** For charts that use a grid layout (like the waffle, trellis, etc.), the layout will start from the top right instead of top left. **Properties Editor** The headers are now on the right (with the arrow key indicating selection on the left of the text), much like the context menu in the grid, and the content is on the left. The label and the control (such as a checkbox, select box, etc.) will be switched for each of the properties. On the right will be the label or header, and on the left will be the control. **Legend** For all the legend elements (laid out horizontally), the symbols will be shown on the right and the text on the left. **Tooltip** The text will be right justified by default. # Series using Attribute ### Draw Chart Series Using Attribute By default, all Vitara charts are formed as series utilizing metrics. However, we can use attributes to draw series on the Vitara chart. The attribute that we want to generate a series in the chart must be placed in the “Color Drop” zone in dossiers. In the screenshot below, a line chart displays the details of the Revenue metric over quarter and year dimensions. That is, the series is created using the Revenue metric.

The similar graph can be used to show yearly income figures. We must draw the series using the year attribute for this. Simply drag and drop the Year attribute from the Category drop zone to the Color by drop zone, as seen in the screenshot below.

Now chart series is drawn using Year attribute. # Small Multiples Small Multiples displays data from numerous small, interconnected graphs in a single display. Because they use the same axes and scales, the user may compare trends across dimensions in a single view. This property is now available in the following charts: Bar, Column, Area, Line, Bubble, Bullet, KPI Ring, Stacked Bar, Stacked Column, Slope, Pie, Simple KPI, Waterfall, Tornado, Dumbbell, and Sparkline. ## Enabling small multiples In dossiers, drag and drop an attribute into small multiples dropzone. See the screenshot.

To enable small multiples in documents, at least one attribute in the chart must be present. Navigate to the tiny multiples tab in the property editor. Now check the ‘enable tiny multiples’ box. The first property in the chart/grid will then permit small multiples. Take a look at the screenshot.

When small multiples are enabled for a chart, then play animation and drilling cannot be enabled.
## Number of columns The number of columns is set to ‘auto’ by default, and in most charts, this will be ‘2’. Depending on your needs, you can modify the number of columns to any number. Take a look at the screenshot.

## Category axis labels The category axis labels are displayed by default for all tiny multiples in the first/left column. That is, if the number of columns for the chart is ‘2’, category axis labels for small multiples in the second column will be hidden. Simply click the’show all category labels’ option to activate the category axis labels for all columns. This option will be useful if each multiple contains separate data categories. Take a look at the screenshot.

## Shared value axis All multiples in each column are shared by default, with a common value axis presented at the bottom of the chart. This is due to the ‘shared value axis’ checkbox being selected. Take a look at the screenshot.

If we require a value axis for every small multiple, simply uncheck the’shared value axis’ checkbox. This option not only displays the axes for all multiples, but it also scales them individually, making the data easier to analyse. Take a look at the screenshot.

## Thresholds A new feature named ‘Check across all charts’ is introduced to the ‘top’, ‘bottom’, ‘top percentage’, and ‘bottom percentage’ thresholds. This feature aids in the calculation of thresholds over all multiples. For example, suppose there are four little multiples ‘books’, ‘electronics’, ‘movies’, ‘music’ in the chart with a metric ‘Revenue’. For the revenue indicator, we will now use the ‘top 1’ level in green. The top 1 revenue in each multiple is then applied to the threshold. Take a look at the screenshot.

However, if we only want the threshold to apply to one small multiple that has the greatest income among all small multiples in the chart, we must enable the ‘Check across all charts’ checkbox while applying the threshold. Take a look at the screenshot.

# Smooth Line The Line Smoothening feature is added in the Vitara charts . Instead of sharp curve lines, we can now use this new capability to create line charts that represent smooth curves. #### List of charts support this feature: * Line/Area/Sparkline charts * Combination chart using Bar/Column charts * Combination chart using Stacked bar/column charts #### How can we enable Smooth line feature Smooth Line will be available in the line settings menu in line/area/spartline charts.

If we use a line/area chart in the combination chart for a given series, the Smooth Line option is available in the same series option menu.

#### Below is the screenshot of charts with smooth line feature

# Time Bucket ## Time Bucket – Change the Date Bucketing You can change the date bucketing for columns with date values in tables. To do this, hover over a column name in the table and click the ![More options menu icon](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcdrJBjfncMW7iH_37OwPh2e6qtJuvXK3PYBnaCUIlZ_6PxjYI792tlL7PavpmT92atk5mimKHGTv4c0V730kKeK1lP9pIc4ymX0zIczclq1NGyx9DVE7RAIr-1XwgBJETrK6Mm?key=zRKIQnLOkaNPpynuXhqEaw) More menu icon. Users allow you to bucket data at various levels of granularity—ranging from detailed (minute or Second) to broader levels like year. You can also group data based on its position relative to a larger time bucket. . For example, you can group data by month of quarter, or week of month. This flexibility helps tailor your analysis to the time-based trends most relevant to your reporting needs. ### ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcBXzjmqarDCNAZWY1zXvAKzjjsgTxQDfbcuKJTuTraMBnnRBV_6W661ZA4UBenwsDHe4iEalyNf47wjGFw4Bkf8BuWH03T2OMfJU2QkpZ6yOEl5ubd0BH5YTvsEXVBMmFy2KJZ?key=zRKIQnLOkaNPpynuXhqEaw) Apply any of the VitaraCharts, such as the Vitara Bar Chart shown in the screenshot below. All relevant chart elements—data labels, axis labels, and tooltips—will consistently display the date in the format applied through the bucketing settings.

###
# Tooltip Customization ## Introduction We can customise what appears in the VitaraCharts tooltip. To edit tooltips, utilise the new HTML editor in the “Tooltip” property menu. The tooltip editing window is seen in the screenshot below.

The editor is a lightweight component that supports the following features: Alignment (Right, Center, Left and Justify) Font Style (Family, Size, Bold, Italic, Underline, Color) Recognizing new lines Markers Support for macros (described below) ## Macro Support: The macro suggestion box is seen in the screenshot below. Hover the pointer over the ‘i’ sign to see the chart’s available macros.

Starting from version 5.3.10, macro suggestions are displayed with a new look. Refer to the screenshot below.

The new tooltip editor component will give all possible element names that should be supported as macros (through invocation configuration options). For example, if a report has attributes Country, Category, and Sales, Profit Margin, then all of the following macros are possible in the tooltip editor: Country Category Profit Margin Sales Metric Names Metric Values Attribute Values When a user starts typing “&” character, all the possible macro suggestions will be shown.

When one of the macro elements is selected, the editor inserts it into the text (and saves it in the state) as &\[macroname]. So, if the user selects ‘Metric Names,’ the displayed macro will be &\[Metric Names]. The tooltip’s width is fixed at 30px. As needed, the height will increase. There are certain unique macros, such as ‘Metric Names,’ ‘Metric Values,’ and ‘Attribute Values.’ Typical syntax is: &\[Metric Names]: &\[Metric Values] or &\[Metric Names] = &\[Metric Values] We go over all of the metrics (including those in the tooltip and data zones) and provide them in the desired way here. As the name implies, the ‘Attribute Values’ macro contains the attribute elements (comma separated) at which the data point is assessed. For example, if a data point has Country=USA and Category=Electronics, the ‘Attribute Values’ macro will replace it with USA, Electronics. ### Tooltip on Line/Area: A new option is available for Line and Area series. By default, when the series type is Line or Area, the tooltip appears even when hovering over empty space in the visualization. To improve this behavior, a new option called “Show only on Hover” has been introduced in the tooltip tab. When this option is enabled, the tooltip is displayed only when hovering directly over the line or area, and not when hovering over empty spaces in the chart.

# Tooltip Links We may now specify Tooltip Links in the Vitara Charts. A tooltip will appear on any Vitara chart when the cursor is hovered over it. Links can be created to the text that appears in the tooltip. All Vitara charts—aside from the Grid, and Charts—support the tooltip links functionality. ## Steps to set Tooltip Links in Vitara Charts ### **Step 1:** Hover the pointer over any of the vitara charts to reveal the Edit button. To access the properties window, click the Edit button. ### **Step 2:** Activate the Tooltip menu. Two icons for the link and unlink features are present in the tooltip menu, as seen in the screenshot below.

Select the tooltip text for which the link needs to be included in the tooltip editor box. Alternatively, manually insert text in the tooltip window (for example, ‘click here for detailed report’), select the text, and click on the link icon, as seen in the screenshot below. After that, a new ‘Enter a URL to link’ window will appear.

### **Step 3:** Enter the link URL in the ‘Enter a URL to link’ field. The URL can point to a report, answers, or a website. Now, click the Add button, followed by the Apply button. In the screenshot below, for example, a link to a report has been added.

### **Step 4:** Hover the mouse over the chart to reveal the tooltip, then click on the words for which the link was created. The URL of the link will then be accessed in a new browser tab. This allows the user to add as many links as they want.

## Unlink: There are two methods for removing the linkages. 1. Select the text on which the link is applied in the tooltip editing box, then click the Unlink icon. This eliminates the link that was applied specifically to that text. 2. Click the unlink button without first selecting the tooltip text. This removes all of the links that were previously applied. Select the Apply button. # GRID CHART GUIDE # Adding Images Using HTML Tags Images can also be added to the Vitara Grid Chart by including a dataset column that contains HTML tags or links. SVG images (such as logos) are triggered using these HTML tags or links specified in the attribute. The logos will automatically display on the chart once this column is included in the attribute. **Example of Dummy Dataset:** Below is a sample dataset that demonstrates the required structure for adding logos

Below is a screenshot of the Vitara Grid Chart displaying the logos. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FaIWj9jekuW8ZkHaHq0ca%252Funknown.png%3Falt%3Dmedia%26token%3D50879dd3-2e8a-49f4-90e2-54d83ab3289b\&width=768\&dpr=4\&quality=100\&sign=66084bba\&sv=2) # Appearance ## Properties Menu - Appearance Most of the text formatting properties for the Vitara grid chart are available in the ‘Appearance’ tab. This tab can be accessed from the ‘Edit’ button. Hover the cursor on the Vitara grid chart, click on the ‘Edit’ button and select the ‘Appearance’ tab.

## Theme Vitara grid chart will come in the ‘Fresh’ theme by default. There are three other themes available in the Vitara grid chart: fresh, dark, and white. The theme can be modified from the edit property window . Below are the screenshots of accessing the theme. Grid theme from edit property window:

## Layout There is an option to view the layout from the right to left format . You can enable the option if want to see the chart from right to left. Below is a screenshot from the property editor.

See the screenshot below when we enable the right to left layout in the grid chart

#### Toggle Animation Toggle Animation is a property that occurs while sorting the rows, resizing height of rows, filtering the rows and expanding/collapsing a row group. By default, the toggle animation is enabled.

**The grid will animate the rows in following scenarios:** Row Animations 1. Filtering Rows 2. Sorting Rows 3. Expanding / Collapsing Row Groups 4. Resizing height of rows Each of these animations is turned OFF by default. The example below shows the animation how it works

## Show/Hide Dropzones In the Appearance theme you can see a property named Grid Dropzones, where you can Hide/Show the Grouping/ Pivot dropzones in the Grid chart. By default, the drop zones are shown in the grid chart. You can hide the drop zones if needed. Below is the screenshot of Grid Dropzones property in Appearance tab Below are the examples shown in two ways; 1. Grid Dropzones are hidden

1. Grid Dropzones are shown

## Grid Row Height In Vitara grid chart rows are classified as; normal grid rows, column header row, and group header rows. Vitara grid chart allows users to modify the height of all the above-mentioned row types. Here you can hide the children count by enabling Hide children count checkbox.

“Grouped Row Height” field will be available if we apply to the group on any of the attributes/ metrics. ## Children Count In the Appearance property tab, you can see an option hide children count, where you can show/hide the children count of the row groups. By default, the hide children count option will be in enabled state and you cannot see the count of the row groups. This option can be visible only if the grouping is applied in the grid chart. Below is the screenshot of Hide Children count in the Appearance tab

Below is the example where Hide Children count enabled.

Below is the example where Hide children count is disabled.

## Header and Body Text Styles Vitara grid chart offers you all the text formatting options; font family, font size, bold, italic, underline, text color, font alignment and background color. Below is the screenshot of theme properties showing header style options and body style options.

# Auto Size ## Properties Menu - Auto Size Auto size property is adjusting the size of the columns in the Grid chart. In Vitara Grid chart there are two kinds of auto size options. 1. Fit to Grid width 2. Fit to content By default, when you open the Vitara grid chart, it will adjust all the column contents to ‘Fit to Grid Width’. ‘Fit to Grid Width’ will adjust all columns in equal size, within the visualization area in the horizontal direction. Visualization doesn’t show scrollbar in the horizontal direction. ‘Fit to Grid Width’ state will dynamically adjust the size of the window even after we modify, i.e. maximizing or minimizing the visualization, visualization shrinks its area when we add other visualization, visualization area increases when we delete other visualizations etc. ‘Fit to Content’ will adjust the grid chart columns to their content width. We can also manually adjust the column size by dragging the column separator line at the column headers. After adjusting you need to save the dossier or document to retain the changes. We can apply ‘Fit to Grid Width’ or Fit to Content’ properties by opening properties windows in any of the three ways. Each column can be resized by dragging to the right or left side of it’s header in the grid chart. ## Auto Size using the ‘Edit’ button Hover the cursor on the chart to display the ‘Edit’ button. Click on the ‘Edit’ button to open the properties window.

The chart will show ‘✔’ symbol beside the respective property which is currently applied on the chart. When we manually adjust the size of the chart, the chart will not show ‘✔’ mark on any of the tabs. ## Auto size using Hamburger Button We can open ‘Auto size’ property using the hamburger button of any column. Click on the hamburger button of any column. We have an additional property ‘Fit this Column to Content’ when we open ‘Auto size’ using the hamburger button. Below is a screenshot of this property.

We can apply ‘Fit this Column to Content’ for any individual columns. ## Column resizing by dragging the header Resizing columns gives you the flexibility to customize the chart according to your specific needs. You can prioritize certain columns by making them wider while compressing less important columns to save space. A grid chart’s columns can be resized to improve the data’s readability. It ensures that all the information in each column is visible, making it easier to interpret and analyze the data. ## **How to resize columns in a grid chart ?** Resizing columns in a table by dragging the sides of the columns in their headers is a convenient feature that allows users to customize the display of information. By simply dragging the right or left side of the columns, users can easily adjust the width of the columns to better fit the content. This flexibility in column resizing enhances the user experience and enables efficient navigation and analysis of data in tables. Whether it is to accommodate longer texts or to create more space for specific data, this feature provides users with the ability to optimize the presentation of information according to their preferences. Below is a sample gif file that shows how to resize the columns.

For information about reordering the columns, [click here.](https://tsdocs.vitaracharts.com/grid-chart-guide/reorder-columns) ## Adjusting Row and Header Heights With the introduction of version 5.3.5, users can now easily adjust the height of rows and headers in the grid. This enhancement improves usability and customization, allowing for greater flexibility in personalizing the grid layout. ### **How to Adjust Header and Row Heights** 1. Hover Over Row /Header Border: Move your cursor over the boundary between two rows. A resizing cursor (usually a double arrow) will appear. 2. Click and Drag: Hold down the “Alt” key on your keyboard and hold the boundary, then drag it up or down to adjust the height of the row. Once the desired height is reached, release the mouse button to set the row height. Below is a sample GIF file that shows how to adjust the rows and headers height. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FkMtcTLwFBm8lnWRkLkeQ%252FGrid%2520altspacing.gif%3Falt%3Dmedia%26token%3D56605e1b-b120-46b8-ae03-dc7598641cbc\&width=300\&dpr=4\&quality=100\&sign=25e79316\&sv=2)
# Column Totals ## Properties Menu - Column Total In Vitara charts, column totals feature is implemented in the Grid chart. By default, the column total is not shown. We have to enable the Column Totals in the ‘SubTotals’ property in the property editor.

The only default aggregation for Column Totals is “Sum” of the metrics in the chart. Below is the screenshot where the column totals are in enabled state in the property editor.

Below is the screenshot where the Column totals is enabled and ‘Total’ column is displaying in the chart calculationg the metrics in the chart.

## Column totals when Grouping is enabled Group any attirbute in the chart, and enable the column totals in the property editor. The totals column can be added where the totals are calculated acorss the metrics.

Below is the screenshot where the grouping is applied on Category attribute and ‘Total’ column is calculating across the metrics ‘Cost’ and ‘Revenue’.

### **Column Totals with Pivot** #### **To get totals across the metrics in the chart.** Pivot any attribute in the chart and the other attributes automatically gets grouped in the char. Enable the Column Totals in the Sub totals property. Now you can see the ‘Total’ column calculated across the metrics. Below is the screenshot where Category attribute is pivoted and Total is calculated across the Cost and Profit metrics.

#### **To get totals on a single metric next to the attribute.** Assume two attributes and two metrics are added to the Vitara Grid chart. Apply ‘Move to Rows’ on any metric in the chart, then Pivot the ‘Metrics’ column along with a attribute and the other attribute will be automatically grouped. Make sure the ‘Metrics’ column should be in the first position of the Pivot zone. Below is the screenshot where the Category, Quarter are the two attributes and Cost, Revenue are the two metrics added to the chart. The ‘Mover to rows’ is applied on a metric in the chart and the ‘Metrics’ column is pivoted along with the ‘Category’ attribute.

Enable the Column Totals in the Sub totals property. Now you can get the Totals on a single attribute next to the attribute in the chart.

Below is the screenshot shown where Total column is shown when ‘Metrics’ column and Category attribute are pivoted and Quarter attribute is grouped. Now you can see the totals on the ‘Cost’ metric next to the Quarter attribute.

**Enhancement** :Column Totals option will only be used to display total columns in non-pivoted charts. When using a pivot, this option will be hidden. Two new options have been added to the Subtotal tab: **Pivot Row Total** and **Pivot Group Total**. [Click here](https://tsdocs.vitaracharts.com/grid-chart-guide/subtotals#introducing-pivot-row-total-and-pivot-group-total-for-advanced-subtotaling) for detailed information. # Creating a micro chart #### Using the grid to create a Micro Chart Trendlines feature is added in the Grid chart. With this feature, we can convert the Grid chart into Micro chart. **Inputs** **Attributes required:** 2 or more **Metrics required:** 1 or more Follow the below procedure to convert the Grid chart into Micro chart. **Step 1:** Create a Grid chart with 2 or more attributes and minimum of 1 metric. For example, we have a grid chart created with 2 attributes and 3 metrics. See the screenshot ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FLN7hL8Wi0b3GAeOGG2l9%252FgridMicro1.png%3Falt%3Dmedia%26token%3D17b94bcc-70e9-45fb-9337-fff544b6c074\&width=768\&dpr=4\&quality=100\&sign=2b9bad7d\&sv=2) **Step 2:** Group by the attribute ‘Year’. In the Micro chart, we have two drop zones for attributes called Category axis and Trend By. In this example, ‘year’ will be the category axis attribute and ‘Category’ will be the Trend By attribute. See the screenshot which shows the year attribute in grouped state. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FGl6vdP03xy8zECBwOsBh%252FgridMicro2.png%3Falt%3Dmedia%26token%3D805fb000-6918-4727-bbb2-73331a2b22d4\&width=768\&dpr=4\&quality=100\&sign=57596c4c\&sv=2) **Step 3:** Now we will apply 3 different trend lines for the 3 different metrics. To know about trend lines click here See the screenshot which shows the trendlines applied. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FwSODDocqDb6u1mK5UzNf%252FgridMicro3.png%3Falt%3Dmedia%26token%3Da4e6d470-67fc-4149-bb23-b7da6cac25b2\&width=768\&dpr=4\&quality=100\&sign=15fa2658\&sv=2) **Step 4:** Finally, hide the Grid dropzones using below steps 1. Open property editor > Appearance tab. 2. Set the ‘Grouping/Pivoting dropzone’ to hide See the screenshot below with hidden Grid dropzones. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FgfzTG35p3RuSPblmrE8C%252FgridMicro4.png%3Falt%3Dmedia%26token%3D0884feb7-e964-4faa-abe2-fdf3968eba66\&width=768\&dpr=4\&quality=100\&sign=d9ebd897\&sv=2) If you have noticed the above image, the grid dropzones are hidden. Just compare this screenshot with the screenshot in step 3. And the Grid chart is now converted to Micro chart For detailed information on configuring Trendline settings, refer to the [Trendline](/grid-chart-guide/trend-lines) documentation # Custom markers ## Properties Menu - Custom Markers in Grid chart In Vitara Grid chart, we allow users to represent data markers. Custom Markers popup option will be available in “Display as” menu. Markers can be applied on ‘No grouping’ and ‘Grouped’ rows. The scaling at each aggregation level will be done separately.

## **Marker Type & Marker Color** Click on the marker icon to open the marker selection window. Please refer to the below screenshot.

After selecting the desired marker close the marker selection window. Select the marker color. Below is the screenshot of custom markers applied on cost metric.

When using custom markers we support in three modes: Auto scaled, Fixed scale and Fixed Range scale. The data marker tab with the ‘no grouping’ and ‘grouped’ rows screenshots are shown below.

## **Auto Scale** The number of markers will be calculated based on the column width, and the metric value shown in the column. **Fill Metric** In addition to rendering the markers themselves, we can allow for fills to be done based on another metric. Users can fill the rendered marker with different color where fill percentage will be calculated based on the value of metric for current cell and max value of the metric. Below are the examples shown, where data markers applied on Profit & Revenue metrics with Auto scaling on ‘No grouping’ and ‘Grouped’ rows.

Below are the examples shown, where data markers are applied on Profit & Revenue metric with Auto scaling having ‘Fill metric’ on ‘Nogrouping’ and ‘Grouped’ rows.

## **Fixed Scale** User can decide maximum markers to be rendered in a cell. The number of markers in the cell with max value will be equal to user-defined max value while markers in other cells will depend on the cell value and user-defined max value If “Map data to Scale” is disabled then the number of markers will be equal to the value of the cell( even if the cell value is more than the user-defined max value, markers in the cell will be equal to user-defined value will be plotted) Below are the examples shown, where data markers applied on Profit & Discount metrics with Fixed scaling (disabled Map data to Scale) on ‘No grouping’ and ‘Grouped’ rows.

Below are the examples shown, where data markers are applied on Profit & Discount metrics with Fixed scaling (enabled Map data to Scale) on ‘No grouping’ and ‘Grouped’ rows.

## **Fixed Range Scale** Fixed range scale is similar to fixed scale with a cap on minimum markers in a cell. The fixed range option is that we show marker count in the range of 1 to 5(default values); You can change the min and max count values. Below are the examples shown, where data markers are applied on Profit & Cost metrics with Fixed Range scaling (disabled Map Data to scale) on ‘No grouping’ and ‘Grouped’ rows.

Below are the examples shown, where data markers are applied on Profit & Cost metrics with Fixed Range scaling (enabled Map Data to scale) on ‘No grouping’ and ‘Grouped’ rows.

# Custom Editor ## Custom Editor Welcome to the documentation for the latest feature in the grid chart software. This exciting update empowers users with enhanced chart personalization capabilities, allowing them to tailor their charts to their specific preferences. This guide will walk you through the various steps and options available in this new feature. Enabling Customization To get started with the customization function, follow these steps: ## **1. Keyboard Shortcut:** Hold down the “Ctrl” key on your keyboard and left-click on any metric or attribute header to activate the customization feature.

Alternatively, access the hamburger menu and choose the “Format” button. This will also open the custom editor.

## **Custom Editor Overview** Once the custom editor is enabled, the custom editor will be your tool for making changes.Below is an illustration of how the custom editor looks when launched.

## **Tabs for Formatting:** ### **Column Content Tab:** Apply formatting to the content area of a selected element’s corresponding column (attribute or metric). Changes are displayed within the column’s content.

## **Header Content Tab:** Apply formatting to the header of a selected element’s corresponding column. Changes are reflected in the column header.

## **Custom Editor Menu:** Below the tabs, you’ll find the “Custom Editor Menu.” This menu offers a range of customization options: ## **Images:** To add photos to the chart, use the “Insert” property tab. This brings up a new pop-up menu where we can add the picture and URL to the Source field box and adjust the width and height to make it visible within the grid.

## **Links:** To add URL links to an attribute or metric, select the “Insert” property tab. This brings up a new pop-up menu where we can choose the link we want to add, give it a name using the title property, and choose whether to open the link in a new tab or the same window as it is currently open.

To unlink the set link right click on the added link and click the remove link option.

## **Table Menu:** Imagine that we are designing a sales analytics dashboard with a customized editor’s table displaying data on product sales. The typical data columns (Product Name, Units Sold, Revenue, etc.) should still be included, but you also want to include more in-depth breakdowns using tabular data in specific cells. To add tables to the chart, go to the “Insert” tab and arrange the rows and columns to build a table. Then, in each cell, we can fill it with macros of our choosing to be displayed on the grid.

Furthermore, we can individually customize each cell individually by going to that specific cell and then right clicking to open a menu where we can further customize the cell properties and set border color, style, width, and similar for the table properties.

We can also add, merge and delete row/columns from table itself with the below table property

## **Format Menu:** Assume you’re creating a financial performance dashboard to display quarterly sales statistics. Instead of presenting plain numbers, you decide to use Grid’s versatility and the formatting features of the custom editor to improve data clarity and presentation. The format box provides an abundance of options, including bold, italics, underlining, strikethrough, superscript, subscript, and various formatting options. alignments, font sizes, line height, background color, and many others. To apply the formatting head to the metric/attribute where we want to make formatting and select the formatting and hit submit button to apply changes.

## **Toolbox Panel:** The toolbox panel is situated below the custom editor menu. It provides convenient buttons for quick text adjustments, eliminating the need to navigate menus.

Inserting Elements: The custom editor empowers you to insert various elements into your chart: Emojis: Add a touch of emotion to your chart. Undo & Redo: To restore or revert the performed actions. Formatting: Applying formatting like Bold, Italic and text color, Background, Size and font. Tables: Organize data effectively. **Applying and Exiting** After making the desired formatting and modifications, simply hit the “Submit” button to see the changes take effect. To exit the custom editor, click anywhere on the grid chart. This will return you to the default view.

## **Creating Metric/Attribute Groups** To group metrics or attributes, follow these steps: ### **1. Selection:** Hold down the “Ctrl” key on your keyboard. ### **2. Grouping:** Left-click on the metric or attribute headers you want to group. ### **3. Column Grouping Button:** In the custom editor, you’ll find the “Column Grouping” button. Clicking it will create the group for you.

## Using Macros in the URL Link of the Custom Editor The Grid Chart allows users to define custom links using macros, enabling dynamic URL generation based on attribute elements. This feature enhances interactivity by allowing seamless navigation to web pages. ### Why Use Macros in URL Links? In today's data-driven world, effective visualization is essential for informed decision-making. The Grid Chart provides a structured way to display data, but integrating macros into the URL link within the custom editor enhances interactivity and usability. ### Key Benefits: **Dynamic Content:** Macros allow the URL to change based on the data being displayed, ensuring that each user interacts with content that is relevant to them.By incorporating macros, you can customize URL links using specific data points from the Grid Chart. **Improved User Experience:** By linking to customized URLs, users can access specific information or actions with a single click, saving time. **Enhanced Tracking:** Incorporating macros can help in tracking user interactions more effectively, providing valuable insights into user behavior. ### Implementing Macros in URL Links **Syntax and Structure:** To use a macro, you need to follow a specific syntax. Typically, this involves enclosing the macro name in braces. For example, &\[macroName].\ **Example Usage:** For instance, if you want to link to a web page, your URL might look like :” \ To add this URL link to an attribute or metric, select the “Insert” property tab. This brings up a new pop-up menu where we can choose the link we want to add, give it a name using the title property, and choose whether to open the link in a new tab or the same window as it is currently open. Please refer to the attached GIF file for reference.

. Incorporating macros enhances the functionality of your custom editor and improves user experience in navigating the Grid Chart. With these instructions, you’re ready to dive into the exciting new world of grid chart customization. Enjoy tailoring your charts to perfection! ## Macro-Level Threshold Styling Enhancement Starting from version 5.3.6, threshold rules are now applied individually at the macro level when a cell contains multiple column macros. This ensures precise styling based on each macro’s value and context. * Thresholds are matched and applied directly to each macro instance (e.g., &\[cost], &\[profit], etc.). * The threshold engine scans the cell content, identifies each rendered macro, and applies the corresponding threshold rule to that specific macro's value only. ### **Styling Behavior Based on Cell and Macro Context** 1. **General Cells with Multiple Macros** * Background color is determined by the column the cell belongs to.\ Example: If the Macro is in the Cost column and contains \[Cost], \[Profit], etc., the background color is based on the Cost threshold rule. * Macros not matching the cell’s column (e.g., \[Profit] in a Cost column) will still have their thresholds applied, but only via text styling (e.g., text color and marker). 2. **Cells Containing Table Structures** : If macros are rendered within a table structure inside the cell: * Each macro appears in its own table cell. * Each macro’s background color is applied independently, based on its own threshold rule, regardless of the outer cell's column.\ \ **Note** : This logic applies uniformly to both metrics and attribute macros.\ Refer to the sample GIF file below for reference

# Filter Data ## Properties Menu - Filter Data We can also apply a filter on metrics to filter the data in the Vitara grid chart. Click on the hamburger button of any metric column on which you want to apply a filter, select ‘Filter Data’.

Now filter editor popup window will open.

In the ‘Filter For’ drop down box select the metric on which you want to apply a filter, then click on ‘Add’ button.

In the ‘Select Condition’ drop down box select the appropriate filter condition, give values and then click on the ‘Apply’ button.

Vitara grid chart will be updated with the data applying filter condition. ## Row Group Filtering In the hamburger menu, we’ve added group filtering for attribute grouped elements. In the example below, we grouped the attributes ‘Year’ and ‘Category,’ and group filtering was applied from the hamburger menu where we filtered books, and it shows value from both years.

**Beginning with version 5.3.10, the filter menu has been refreshed with a new design. All functionalities continue to work as in previous versions. Please refer to the screenshots below.** ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FLJdkMHq9sAcF3Le0XQBy%252Funknown.png%3Falt%3Dmedia%26token%3D16dac8a6-8baa-4e9a-9050-9472f5ae8910\&width=300\&dpr=4\&quality=100\&sign=493338a4\&sv=2) ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FYojG71uF9TAe9HYHRZVT%252Funknown.png%3Falt%3Dmedia%26token%3D1e059d36-8387-4d74-a69d-023bec9eb4dd\&width=300\&dpr=4\&quality=100\&sign=95b1abd1\&sv=2) # Format/Clear Format ## Properties Menu - Format/Clear Format The text styles we apply using the ‘Grid Theme’ tab will reflect the entire grid i.e all rows and all columns. Whereas the text styles and background color we apply for any column using the ‘Format’ tab will affect only that particular column. As shown in the below screenshot we can access ‘format’ or ‘clear format’ options from the hamburger button of any column.

We can open column formatting menu in two ways. **1. Using Edit button.**\ Hover the cursor on the grid chart to display “Edit” button. Click on the “Edit” button to open vitara properties window. Open the “Format Column” menu. ![](/files/IJpRgsNofXPv6mkzukIo)
User can now an ability to access the custom editor from the hamburger menu by clicking the format button.For more details please refer to the[ Custom Editor](/grid-chart-guide/custom-editor) **Note:** The properties applied using the ‘Format’ tab for a particular column, will overwrite the properties applied using the “grid Theme’ tab for that column.\ The ‘Clear Formatting’ tab will delete all the formatting applied on that particular column. #### Example: In the below screenshot vitara grid chart is displaying the data for current year Profit, last year’s Profit, current year Units sold and last year’s Units sold.

To differentiate the current year and previous year columns, i want to apply Blue Color for the current year metrics and Red Color for the previous year metrics. Open the “Format Column” menu using one of the two ways discribed above. In the ‘Select Column’ drop down box select the column for which you want to apply specific formattings.

\ In the “Format For” drop down box select the part of the column (header or body) to which you want to apply formatting.

\ Apply the text formattings and finally click on ‘Apply’ tab.

\ Below is the screenshot of the grid chart in which current year metrics are given blue color and last year metrics are given red color.

The user can now apply formatting to horizontal bars and pins . An illustration of a feature is shown below.

To remove applied formatting, users can access the “Clear Formatting” option from the hamburger menu.

## Column Wrap Starting from version 5.3.6, the grid now supports text wrapping for both the header and body (cell) of its columns. This enhancement improves readability and layout flexibility—especially useful for displaying long text values or labels without truncation. ### How to Enable Text Wrapping? Users can enable text wrapping using the Wrap text option available in the Format tab. This option can be applied independently to the header and cell body of each column. See the screenshot below for reference.

After enabling wrapping, resize the columns by dragging the left or right edge of the column header to adjust the width. This wraps the text based on your preferred column size, improving readability and preventing content from being truncated. Refer to the GIF below for a visual example

# Grand Total ## Properties Menu - Grand Total In Vitara grid chart by default shows ‘Grand Total’ row at the bottom of the visualization. The default function applied is ‘Sum’. However, we can modify the default aggregation function to other functions in the list.

Therefore, the term ‘Grand Total’ is just for naming purposes and does not mean it will show only totals. The actual value of the Grand total will be calculated by using the function applied in ‘Value Aggregation’. For example, if we apply ‘Value Aggregation’ function - Max, the grand total will also show the max value among the values. Show/Hide Grand total: If we don’t want to show ‘Grand Total’ row, then we can hide the ‘Grand Total’ row. Click on the ‘Edit’ button select the ‘Grand Totals’ tab and expand the dropdown box select ‘Hide’.

Now, you can do the text formatting options and apply background color to the Grand totals row; font family, font size, bold, italic, underline, text color, font alignment and back ground color. Below is the screenshots of ‘Title formatting’ and ‘Value formatting’ of Grand totals editor.

Examples of screenshots where the text formattings and back ground colors are applied for grand totals.

## Grand Total Threshold We introduced a feature that enables users to add ‘thresholds’ to the grand total row. To enable thresholds for grand totals, go to the thresholds tab in the editor window, then pick source and target, then select ‘Grand Total’ from the group option above the source, and apply desired threshold condition.

# Pivoting and Row Grouping ## Properties Menu - Row Grouping and Pivoting The grid chart includes grouping and pivoting drop zones, allowing users to easily drag and drop attributes into these zones. Below is a screenshot showcasing the drop zones for reference.

Here, Region attribute is dragged into pivoting zone and the product category and product sub-category columns will be grouped automatically. Below is the screenshot shown.

You can hide the Grouping/ Pivoting drop zones also from the property editor.

## **Grouping** You can define a group by selecting an attribute or metric. Go to the hamburger button of any attribute, expand ‘Grouping’ and select ‘Group by’ an attribute. For Grouping, you need atleast one attribute and one metric in the grid chart.

In the below screenshot, the grouping is applied on the ‘Year’ attribute level. Vitara grid chart will show the number of sub-elements in each group in round brackets or parenthesis. For example, the group ‘2014’ has 24 sub-elements in it. Click on expand symbol to expand each group.

In the Vitara Grid chart, the state of the expand/collapse of a particular group will be saved. when we reopen the dossier/document the groups which are saved in an expanded state or collapsed state will retain its state. We can group by the “Metrics” column, which is formed from the Metric Pivoting. For Example, In a grid chart apply move to rows for the ‘Profit’ column and Group the “Metrics’ column.

There is an example, where ‘Metrics’ column is grouped with the other attributes like Category, Year and Quater. See the screenshot below.

## **Pivoting** Pivoting is the ability to swap the rows to columns and columns to rows in the Grid chart. Pivoting can be done on attributes and as well as on metrics. Which means we can place the attributes in columns and metrics in rows. To pivot a column we can drag and drop an attribute to Pivot drop zone or we can move attribute to columns. Grouped attributes cannot be pivoted. ## **Attribute Pivoting** Click on the hamburger of any attribute, then click on the **Move to Columns** option. Below are the screenshots of pivoted attributes.

## **Metric Pivoting** Click on the hamburger of any metric, then click on the **Move to Rows** option. You can see the ‘Metrics’ and ‘Values’ column in the Vitara Grid chart. Below are the screenshots of pivoted metrics.

We can pivot the “Metrics” column by dragging the “Metrics” column to the pivot dropzone, which is formed by the option ‘Move to rows’ applied to any Metric column in the Vitara grid chart. For Example, apply ‘Move to rows’ property to profit metric, then drag the “Metrics” column to the pivot drop zone, you can see the attributes in the Vitara grid chart will be grouped automatically. See the below picture where the Category and Year are in the Group by drop zone and “Metric’ column in the Pivot drop zone.

## **Pivot Totals** Pivot columns will now collapse and show the ‘Pivot Totals’ in the Vitara Grid chart. Now you need to have at least two attributes and one metric to attain the pivot totals. First, apply ‘Move to rows’ property on any metric, and drag the ‘Metrics’ columns to the pivot drop zone, as a result you can see the attributes are grouped.Then, to see the pivot totals drag any one of the attribute’s to pivot drop zone and make sure that the ‘Metrics’ column position should be before the Attribute column position in the pivot drop zone. Below are the screenshots of Pivot totals.

For Example, apply ‘Move to rows’ property to Cost metric, then drag the Metrics column to the pivot drop zone, and the attributes Category, Sub-Category, Quarter and Year are grouped, and drag the Year attribute to the pivot drop zone next to the ‘Metrics’ column, here you can see the Year wise Pivot totals in the Vitara Grid chart.

**Enhancement**: Column Totals option will only be used to display total columns in non-pivoted charts. Pivoted charts now include three additional total display options — **Pivot Row** Totals, **Pivot Group** Totals, and **Pivot Group Metric** Totals — providing greater flexibility in data summarization. [Click here](https://tsdocs.vitaracharts.com/grid-chart-guide/subtotals#introducing-pivot-row-total-and-pivot-group-total-for-advanced-subtotaling) for more information. # Horizontal Bars/Pins ## Horizontal Bars/Pin The display style property, which can be accessed from the hamburger menu, allows the user to display any given individual metric as a horizontal bar or horizontal pin’s. It can display the scaling as bars and pins.Hover onto a metric for which the trendlines need to be applied so that the hamburger button will be displayed. Click on the hamburger button, then a menu will be opened. Hover the mouse onto ‘Display Style’, then a submenu will be opened which has the trendline charts. Please refer the below screenshot:

First, for a metric, apply the ‘Horizontal Bars/Pins’ trendline, and then format the bar/pin color and negative color. open the format window, then set the color (e.g Green). Click the ‘Apply’ button

In our case, we’re displaying sales and profits by region and year, with horizontal bars for metric “profit” and horizontal pins for metric “sales”.

## Scaling across cells for Horizontal Bars and Pins We have introduced a new Scaling option which can be found from the Hamburger tab in the Display Option under More Options. The chart scaling is set to ‘Apply at each cell’ by default; to allow scaling, change the Scale option to ‘Same across cells.’

The chart scaling is set to ‘Apply at each cell’ by default; to allow scaling, change the Scale option to ‘Same across cells.’ ### How Horizontal Bars or Pins Work When All Values Are the Same? The Horizontal Bars/Pins visualization represents data values using horizontal bars whose lengths and directions reflect the distribution of values within a column. The bar appearance dynamically adjusts depending on whether the column contains positive, negative, or zero values. **Display Logic** The visualization adapts based on the type of values present in the column: * All **Zero** Values: If all values in the column are zero (e.g., \[0, 0, 0, 0]), the bar appears empty, indicating no positive or negative data distribution. * All **Positive** Values: If all values in the column are positive (e.g., \[1, 1, 1, 1]), the visualization displays a full-length positive bar, representing that all data points are positive. * All **Negative** Values: If all values in the column are negative (e.g., \[-1, -1, -1, -1]), the visualization displays a full-length negative bar, representing that all data points are negative. The screenshot below illustrates this behavior.

# Manage Scaling Grouping ## Properties Menu - Manage Scaling Grouping When we enable scaling grouping and compare metrics trendline, we should expect them to share a common scale based on the data with the greatest range. We can group the columns in the Vitara grid chart using a feature called ‘Scaling grouping.’ Only metrics can be used to create groups. ## Creating Scaling Groups Let us look into creating scaling groups in simple steps. ### Step 1 : Open the hamburger menu of a column and hover onto Grouping, then a submenu opens. See the screenshot below:

### Step 2: Click on ‘Manage scaling Grouping’. Then a new window will open. See the screenshot:

### Step 3: Click on ‘Add new’ to create a column group. Then a menu will appear with group title textbox and dropzones.

### Step 4: Now, drag and drop the objects from the left panel into the dropzone and set the group titles. In this case we are creating two groups as below: ‘KPIs’ grouped with metrics ‘Cost’, ‘Profit’ ‘Group’ with metrics ‘unit sold’ and ‘ Last year’s profit ’ See the below screenshot:

### Step 5: For example, the cost and profit data from the same month will be compared, and we’ll be able to tell the difference between before and after scaling by how the horizontal bars change in size as cells are scaled similarly based on the data with the widest range. The following illustrate shows how the scaling feature appears when we have a visualization that uses the scaling property and another that does not.

In the above example, we are comparing data from the month of April with cost and profit, and we are using scaling to ensure that individual rows share a common scale based on the data with the greatest range. Similarly, for the below image.

## Deleting Groups We can also delete the groups using the below steps. Open the ‘Manage Scaling Grouping’ window as described above in Step1 and Step2. You will find the ‘Delete Group’ text-button for each group. See the screenshot below:

# Manage Column Grouping ## Properties Menu - Manage Column Grouping In the vitara grid chart, we can also group the columns which is called ‘column grouping’. Groups can be created with only attributes or only metrics or combination of both. Below screenshot shows the column groups created in the Grid chart.

In the above image, there are two column groups ‘Year\&Month’ and ‘KPIs’ of which the first group is in expanded state and the second column is in collapsed state. The groups can be expanded or collapsed. If the group is in a collapsed state, then only the first object in the group will be shown on the chart. And the remaining objects can be seen only if the group is expanded. By default, the newly created groups will be collapsed. ## Creating Column Groups Let us look into creating column groups in simple steps. ### **Step 1:** Open the hamburger menu of a column and hover onto Grouping, then a submenu opens. See the screenshot below

### **Step 2:** Click on ‘Manage Column Grouping’. Then a new window will open. See the screenshot

### **Step 3:** Click on ‘Add new’ to create a column group. Then a menu will appear with group title textbox and dropzones.

### **Step 4:** Now, drag and drop the objects from the left panel into the dropzone and set the group titles. In this case we are creating two groups as below:\ ‘Year\&Month’ grouped with attributes ‘Year’ and ‘Month’\ ‘KPIs’ grouped with metrics ‘Cost’, ‘Profit’ and ‘Revenue’.\ See the below screenshot

### **Step 5:** Close the ‘Manage Column Grouping’ window\.Then the groups look like in the below screenshot

Users can now an ability to create groups for attributes and metrics by holding the ‘Ctrl’ key on the keyboard and selecting the desired attribute/metric which are to be grouped.For more details please refer to the [Custom Editor](https://tsdocs.vitaracharts.com/grid-chart-guide/custom-editor#id-3.-column-grouping-button) ## Deleting Groups We can also delete the groups using the below steps. 1. Open the ‘Manage Column Grouping’ window as described above in steps 1 and 2. 2. You will find the ‘Delete Group’ text-button for each group. See the screenshot below

3. Click on ‘Delete Group’, then that particular group will be deleted. Do this for whichever group to be deleted. ## Enhanced Metric Organization with Row Metric Grouping We’ve introduced a powerful feature called Row Metric Grouping, allowing users to efficiently organize metrics when they are moved to rows. This functionality provides a streamlined way to group and categorize metrics based on specific criteria. To gain a deeper understanding of this feature and its benefits, explore the distinctions between Metric Grouping and Column Grouping. This comparison will guide you in optimizing your metric organization for a more intuitive and structured presentation of data. For more detailed insights, click [ManageMetricGrouping](/grid-chart-guide/manage-metric-grouping) to delve into the nuances of Metric Grouping versus Column Grouping. # Manage Metric Grouping ## Manage Metric Grouping We have the ability to do row metric grouping, which means grouping metrics when they are moved to rows. The below screenshot shows the row metric groups created in the grid chart.

In the above image, two metric groups are created: KPIs, which contain cost, profit, revenue and Employee, which contains profit per employee and revenue per employee. Users can group single or multiple metrics via the metric grouping option in the hamburger menu. a. This option will only exist when metrics are in row setup. b. Metrics that are not grouped will be shown “ungrouped”. ## Create Metric Groups ### **Step 1:** Open the hamburger menu of a metric column and hover on to Grouping, then a submenu opens. See the screenshot below.

### **Step 2:** Click on ‘Manage Metric Grouping’. Then a new window will open. Click on ‘Add New’ to create a group. Then a menu with a group title textbox and dropzones will appear.

### **Step 3:** Now, drag and drop the objects from the left panel into the dropzone and set the group titles. In this case, we are creating two groups, as below: ‘KPIs’ grouped with the metrics ‘Cost’,’Profit’,’ and ‘Revenue’. ‘Employee’ grouped with the ‘ profit per employee’ and ‘revenue per employee.’ See the below screenshot.

### **Step 4:** Close the ‘Manage Metric Grouping’ window. Metrics that are not grouped will be displayed as “ungrouped.” This is how the groups appear in the screenshot below.

## Deleting Groups We can also delete the groups using the below steps. 1. Open the ‘Manage Metric Grouping’ window as described above in steps 1 & 2. 2. You will find the ‘Delete’ icon for each group. See the screenshot below.

3. Click on the ‘Delete’ icon then that particular group will be deleted. Do this for whichever group is to be deleted. ### Functionality of Row Metric Grouping & Column Grouping Column Grouping - Grouping of multiple columns. Row Metric Grouping - Grouping of metrics when they are moved to a row. #### Rules: 1. Column grouping & Row Metric grouping can co-exist. 2. The column grouping of the various metrics as columns will transform into row metric grouping when the “Metrics” are moved to rows. E.g.,Cost, profit, and revenue metrics are column grouped and will be automatically row grouped when they are moved to rows. 3. If you move row-grouped metrics to columns, the grouped metrics will be converted to column groups. E.g., In the Move to Rows scenario, if cost, profit, and revenue metrics are Row Grouped, then when the user moves metrics to columns, these Row Grouped metrics will be Column Grouped. Accordingly Check the gif file for steps 1 and 2.

1. Both the “Attribute” and “Metrics” columns were initially grouped together. If we later move the Metrics columns to the row, the Metric columns element will be row grouped, while the attribute will remain column grouped with the original group name. E.g., The year attribute, cost and profit, revenue metrics are column grouped. When these metrics are moved to rows, the year attribute will remain column grouped and the “cost” ,profit and “revenue” metrics will be grouped in rows.

1. Row Group and pivot operations can make use of the Metric Grouping column. The screenshot below shows metric group column in row groups and pivot operations.

See the image below. The Grouped column has been moved to row grouping.

# Pin Column ## Properties Menu - Pin Column To keep a column of a grid visible while you scroll to another area of the grid, pin column will be useful. Go to the hamburger button of the column which you want to freeze, and expand the ‘Pin Column’ tab, select pin position - left or right.

To remove the ‘Pin Column’ property select ‘No Pin’ option. # Reorder columns Vitara grid allows you to drag a column header and drop it to a new position. **Drag and Drop** This is an intuitive way to rearrange columns directly in the grid. * Steps: 1. Hover over the column header you want to move. 2. Click and hold the header. 3. Drag it to the desired location (you’ll see a visual indicator of the new position). 4. Release the mouse button to drop the column in the new position.

**Pivot column reorder** * In Pivot Charts, you can reorder pivot groups and save the customized order. However, when Pivot Group Totals or Pivot Group Metric Totals are enabled, the column order cannot be stored. * The pivot order is saved only when these options are disabled. If either option is turned on, the chart will automatically revert to the default column order.

# Reset Columns ## Properties Menu - Reset Columns With just a click we can delete any property applied to Vitara grid chart. Using the ‘Reset Columns’ tab we can delete all the customizations we applied on the grid chart.

### Clear Column Order Option in Reset Tab Introduced in Version **5.3.8** A new option, **Clear Column Order,** has been added under the **Reset** tab. When a column is reordered in the chart, this option becomes available in the Reset tab, allowing users to clear the column order and restore the default Chart. Starting from version **5.3.8,** all options in the Reset tab remain **hidden** by default. The Reset tab appears empty until any formatting options are applied. When users apply formatting options—such as **Sorting, Pinned Columns, Grouping, Thresholds, Filters, Scaling, Column Grouping, or Metric Grouping**—the corresponding reset options automatically become available in the **Reset** tab. Users can use these options to individually clear the applied formatting. **Example:** In the screenshot below, the **Clear Column Order** option is displayed in the Reset tab because the columns were previously reordered. Users can select this option to remove the applied column order. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FYUBvTUZbWVpSxBWbVF59%252Funknown.png%3Falt%3Dmedia%26token%3Dc53d4b74-1f13-4b39-9bf2-b9e90ea4cedc\&width=300\&dpr=4\&quality=100\&sign=b6941005\&sv=2) # Show/Hide Column ## Properties Menu - Show/Hide Column We can hide or unhide any column in the Vitara Grid chart using the ‘Show/Hide Column’ tab. This feature can be accessed by any of the two ways we can get the properties window, i.e. ‘Edit’ button and Hamburger popup window . Below are the screenshots of all these two ways we can apply the hide column feature. Show/Hide Columns in the property editor.

Hide column in the Column Hamburger popup window.

# Sorting ## Properties Menu - Sorting In Vitara Grid chart with just a click on the header of a column, we can sort the data in that column. For the first click on the column header, representing the column is sorted into ascending order. See the screenshot below which is in Ascending order.

If we want to sort the column in descending order, click a second time on the column header. representing the column is sorted in descending order.

Sorting can be removed by clicking on the column header for the third time. We can also sort multiple columns by holding the ‘shift’ button on your keyboard click on all the column headers which you want to sort. ## **Advanced Sorting** Advance sorting will allow users to do different sorting on different grouping levels. By this, you can easily sort the columns in your required order. The Property editor has an option of Sorting. See the below-representing sorting option in 2 different ways. ## **Advanced Sorting using Edit Option** From the Property Editor, click the Sorting tab. The first one square button shows the metrics you want to sort and the second one shows the order what you want to sort. See the screenshot below.

## **Advanced Sorting using the Hamburger option** From the Hamburger menu, Select any metric, select Advanced Sorting and click on Manage Sorting, it will take you to the Editor tab. See the screenshot below.

## **Advanced Sorting on Grouping Level** Advanced Sorting can be applied on grouping levels too. Now, once grouping is applied in the grid, there is a button added in the property editor. See the screenshot below where the Sorting is applied on a discount on a product category level.

### Pivot Sort When a chart is pivoted, users can apply sorting to the pivot attributes. In the example below, the Year and Quarter attributes are pivoted, and applying sort to these attributes updates the order in the pivot header accordingly.

# Subtotals ## Subtotals A subtotal lets you see the totals for subgroups of your report data. Vitara Grid chart shows the Subtotals when you group by any column. The subtotal functions include sum, count, minimum, maximum, average, first, last and Ratio in Vitara Grid chart. Subtotals editor by default enables the ‘Use body styles’ option where it is shown same as body styles of the chart; and we cannot do text formattings on Subtotals. Below is the screenshot shown where ‘Use Body Styles’ is enabled.

In Subtotals editor, if we disable the ‘Use body styles’ option, you can do the text formatting options and apply background color to the Subtotals; font family, font size, bold, italic, underline, text color, font alignment and back ground color. Below is the screenshots of ‘Title formatting’ and ‘Value formatting’ of Grand totals editor.

Examples of screenshots where the text formattings and back ground colors are applied for subtotals.

## Show pivot Metric Totals We introduced a new feature called “Show pivot Metric Totals” . By toggling the “Show Pivot Metric Totals” option in the subtotal tab, we can easily view the individual metric totals. This feature allows us to see the sum of each metric within the pivot, providing a comprehensive overview of the data.

This new option provides a convenient way to view data in grouped form. When the group is collapsed, the total for that group will be displayed, giving an overview of the data at a glance. This is particularly useful when working with large sets of data, as it allows for quick analysis without having to expand each individual group.

On the other hand, when the group is expanded, the individual data within that group will be shown. This allows for a detailed examination of each data point, providing a comprehensive understanding of the data set. With this option, users can easily switch between the total and individual views, depending on their specific analysis needs. The sample gif file is provided below.

### Introducing Pivot Row Total and Pivot Group Total for Advanced Subtotaling Enhancement : The option “Show Pivot Metric Totals” has been renamed to “Pivot Group Metric Totals.” This feature is only available when there are two or more attributes in the pivot drop zones; otherwise, it will be disabled. Additionally, two new options have been introduced: Pivot Row Total and Pivot Group Total. **Note** : All three options will only be visible when a pivot is active. You can only select one of the following options at a time. Activating one will automatically disable the other. * Pivot Group Metric Totals * Pivot Group Totals #### Enhancements : Pivot Row Total and Pivot Group Total Introduces two powerful new options within the Subtotal tab: Pivot Row Total and Pivot Group Total. These features significantly elevate the data analysis capabilities, offering users greater flexibility and precision in how subtotals are calculated and presented.

#### **Pivot Row Total** The Pivot Row Total option allows users to generate subtotal values of metrics for each row in a pivot table. This feature is particularly useful when you need a clear, row-by-row breakdown of totals within a dataset. It ensures that users can see the sum of data for each specific row category, facilitating easier comparison and analysis across individual records. By enabling the Pivot Row Totals option, as shown in the screenshot below, you can see the subtotal of metrics such as cost and profit, which sum up the data for each category.

#### **Pivot Group Total** The Pivot Group Total option introduces the ability to calculate and display subtotals for grouped data within a pivot . This feature is ideal for scenarios where data is categorized into groups (e.g., departments, regions, or product lines), and a summary total for each group is needed. By consolidating group data, it provides a more streamlined view of overall data. By enabling the Pivot Group Totals option, as shown in the screenshot below, you can see the subtotals of grouped data of cost and profit , which sum up the data for each group within the pivot.

# Thresholds ## Properties Menu - Thresholds Thresholds enable users to highlight specific values within the chart. In the Vitara grid chart, users have the flexibility to apply thresholds for both metrics and attributes. Applying thresholds is made effortless within the Vitara grid chart interface. We can open ‘threshold editor’ window in any of the below mentioned two ways. ## **Using the ‘Edit’ button:** Move the cursor on the Vitara grid chart, ‘Edit’ button will appear. Click on the ‘Edit’ button to open the properties window. In the properties window select ‘Thresholds’ tab. Click on the add button to apply a new threshold.

## **Using the ‘Hamburger button’:** Move the cursor on the header of any column, hamburger button will appear at the rightmost corner. Click on the hamburger button. A properties popup window will appear. Expand the ‘Thresholds’ tab and click on the add button for adding a new threshold.

## **Apply Thresholds** Below is a screenshot of the threshold editor window. Click on ‘Add’ button to apply a new threshold. The threshold editor window will list all the applied thresholds if any. We can also edit applied thresholds by clicking on the ‘Edit’ button.

Click on ‘Add’ tab to apply a new threshold.

### **Metric:** Select the metric on which you want to apply a threshold in ‘Metric’ drop down box. **Select Target:** In ‘Select Target’ drop down box select the type of threshold you want; a row or cell highlighter. For example, if I apply a threshold for Profit top 5 apply green color, using ‘Cell’ in ‘Select Target’, the threshold will display as shown in the below screenshot.

If we apply ‘Row’ in the ‘Select Target’ drop down box the same threshold will be as shown in the below screenshot.

### **Select Condition:** When you select any threshold condition, the threshold editor window will stretch into its complete view. Below is a screenshot of the full threshold editor window.

Give all the inputs in the threshold editor window. In the ‘Value(s)’ text input box, give appropriate input value according to the threshold condition.Using ‘Background Color’ we can apply colors to the background of the text.Using ‘Color’ we can apply colors to the text where the threshold condition is true. We can show an icon along with text, in the cells where the threshold condition is true. Select any icon from the drop-down box. Apply color for the icon using the ‘Icon Color’ color input tab, and assign a size to icons using the ‘Select Size’ text input box. We can show only in the cells where the threshold condition is true. To apply this property, enable ‘Icon Only’ checkbox. After all the inputs are entered click on the ‘Apply’ tab.

Below is a screenshot of the Vitara grid chart showing the result of the above threshold on the metric - ‘Profit’.

If you want to apply another threshold condition on the same metric click on the ‘Add’ button.

## Grouping Level Thresholds in Vitara Grid In Vitara Grid, thresholds can be applied not only to individual rows but also to grouped rows when attributes are grouped. This allows you to highlight data either at the **detail row level** or at the **aggregation (group) level**. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FgIAkCk8Q5Pcb3w0ihujt%252Fimage.png%3Falt%3Dmedia%26token%3D25271e8a-dbb3-4270-90b2-574abd42757b\&width=768\&dpr=4\&quality=100\&sign=225a20e7\&sv=2) #### How It Works When grouping is applied on any row of the Grid Chart, you can choose whether thresholds should be applied at the group row level or at the individual row (no grouping) level. * Use the **Group** field in the Thresholds panel to select the level: * **No grouping** → Thresholds are applied on normal (individual) rows. * **Group** rows → Thresholds are applied on the grouped rows. **Example Use case** Please see the below screenshot of the Vitara grid chart, where grouping is applied on the ‘Product Category’ attribute. The default aggregation function applied is ‘Sum’.

We can also apply thresholds on these group header aggregations. Open threshold editor window using any of the three possible ways: ‘Edit’ button, ‘Hamburger’ button, ‘Right click’ on the chart.Below is the screenshot of the threshold editor window. Click on ‘Add’ button to define a new threshold.

Expand the ‘Group’ drop-down box. It will show two segments, ‘No grouping’ and the attribute names on which grouping is applied. In our example, as we applied to group on the ‘Product Category’ attribute, the threshold window will show this attribute.

Select ‘No grouping’ if you want to apply thresholds for normal data rows and select the attribute name, e.g. Product Category, to apply thresholds on group headers.Give all the inputs in the threshold editor window. Below is the screenshot applying thresholds on aggregation values.

The features include the ability to select threshold source and target on different metrics, as well as the capability to apply thresholds on attributes. **Example Scenarios at Different Levels** In the screenshot below, thresholds are applied at the Year level: ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FxRkplZrzBjkIQaBVlQVJ%252FTh_level1.png%3Falt%3Dmedia%26token%3Dd82230b5-f55b-4ca4-8a03-03ceecead0b9\&width=768\&dpr=4\&quality=100\&sign=6cec8921\&sv=2) The next example shows thresholds applied at the Category level: ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FtBLIkjnP9E6E76xBk7Qy%252FTh_level2.png%3Falt%3Dmedia%26token%3D9b8b7959-6bc0-4129-951a-5fb79f600ae5\&width=768\&dpr=4\&quality=100\&sign=664087cc\&sv=2) **Last Grouping Level** If no additional attribute is grouped beyond the last level: * The last attribute in the grouping is treated as “No grouping”. * Applying thresholds at the Sub-category level or at No grouping produces the same behavior, since both represent the last level of grouping. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F5mpDnXNvKbeEf2m7qZ8u%252FTh_level3.png%3Falt%3Dmedia%26token%3Def468cce-832a-4e12-a404-9dceda494392\&width=768\&dpr=4\&quality=100\&sign=c3995346\&sv=2) #### Pivot Behavior When the chart is pivoted: * You can still apply thresholds at the row-grouped level. * Attributes added in the pivot will not appear in the Group field of the Threshold Editor. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fr7PXCFv1hUEz11towcC2%252Fpivot_Th.png%3Falt%3Dmedia%26token%3D2b978302-4be0-4a68-ad98-414f2f2cede3\&width=768\&dpr=4\&quality=100\&sign=bf2cdc3d\&sv=2) #### 2. Thresholds on Metrics Column **How It Works** * When **Metrics → Move to Rows** is enabled, a **Metrics Column** is created. * This Metrics Column behaves like an attribute and can be placed in **Row Grouping**. * Thresholds can then be defined at the **Metrics grouping level**, just as with any other grouped attribute. Refer to the attached GIF file for a demonstration of how thresholds work when the Metrics Column is row grouped. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FiJVdDxonm3uAiEnUK5Uu%252FMetrics_Th_Doc.gif%3Falt%3Dmedia%26token%3D9967c810-abbe-43f3-ad17-d6350014be6c\&width=768\&dpr=4\&quality=100\&sign=ecb6fd\&sv=2) ## Enhancements in 4.6.1 version There are two enhancements in thresholds property in 4.6.1 version. **1.** Ability to select threshold source and target. 2\. Ability to apply threshold on attributes. ### Ability to select threshold source and target. In the new threshold editor window you can select source and target for a threshold. The source and target can any metric or attributes availabel in the grid. Basically, this feature allows you to apply threshold on metric using the values of other metric.

## Attribute thresholds in Grid chart In Vitara charts, we can apply thresholds using attributes. The source and target drop down boxes in the threshold editor window will list all the attributes and metrics in the chart. We can select an attribute as source and select an attribute as target then define a threshold condition. We have ‘Equal to’, ‘Not Equal to’, ‘Contains’, ‘Not Contains’, ‘Starts with’, ‘Not Starts with’, ‘Ends with’ and ‘Not Ends with’ are the attribute conditions that can be applied. Click on the ‘Add’ tab to apply a new threshold. Select the Category attribute in Source and Target dropdowns.

In the below screenshot, Month attribute is selected in Source and Target drop downs and applied ‘Starts with’ condition with value ‘J’ and applied .svg marker. The threshold can be displayed as shown in the below screenshot.

### Example Scenarios of Attribute-Related Thresholds **Grid Chart Without Grouping** * Thresholds can be applied directly from attributes to metrics. * Example: Source → Category, Target → Cost ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F0ew1zdKuN0xCxbOfNtMR%252FAtt0.png%3Falt%3Dmedia%26token%3D5bcf5345-5068-4656-8a4f-fbd812758d5e\&width=768\&dpr=4\&quality=100\&sign=c698529\&sv=2) **With Row Grouping** When attributes are row grouped, attribute related thresholds can be applied (e.g., Category, Year, or Sub-category). ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FZJv3eWnhBFcDSWsEK1Yr%252FAtt1.png%3Falt%3Dmedia%26token%3D86bd19b2-9d51-4056-becb-cb6c13272840\&width=768\&dpr=4\&quality=100\&sign=3e49417f\&sv=2)![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F87sZZdVsb2Zl2KpL9TMO%252FAtt2.png%3Falt%3Dmedia%26token%3D9efceab9-b32b-4c57-bb8c-2abef068633f\&width=768\&dpr=4\&quality=100\&sign=7f6763f8\&sv=2) **With Pivot** * When a chart is pivoted, thresholds on pivoted attributes will not work. * Only threshold conditions on row-grouped attributes will be applied. Please refer to the attached screenshots for examples of thresholds when the chart is pivoted. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FmA8k972s8pzdbSNZA6Dg%252FAtt3.png%3Falt%3Dmedia%26token%3Df7f217f1-670a-4c4f-8445-bb03328127ac\&width=768\&dpr=4\&quality=100\&sign=1aeaf6e4\&sv=2)![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252F5z41CHWf8KUnM62n9wzk%252Fimage.png%3Falt%3Dmedia%26token%3D94a7996d-6def-4487-b69d-f23081ee41a8\&width=768\&dpr=4\&quality=100\&sign=6b042dea\&sv=2) **Note**: When using attribute-related thresholds, the **Group** field is inactive because the threshold source and target are using attributes. ### Thresholds Priority When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ. For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold.

# Tooltip ## Properties Menu - Tooltip In Vitara Charts, we added custom formatting for Tooltip. Tooltip is a rectangular text box which is hidden by default and appears when the user hovers over a point. Below is the screenshot of Tooltip enabled in the grid chart.

By default, the tooltip is not shown in the Vitara grid chart. You have to enable the tooltip in the property editor. Below is the screenshot to enable the tooltip.

Example of tooltip in the grid chart Create a Grid chart and enable the tooltip in the property editor.Apply background color, required text formattings and background color formatting. Below-shown is the Example of the applied tooltip with all the possible formattings.

## **Tooltip doesn’t apply on the grouping rows** When any of the columns are grouped in the grid chart, the tooltip cannot be applied to the grouping rows. Tooltip can be applied only on the No-Grouping rows, when grouping is enabled. Below is the screenshot where you can see the Tooltip on the ‘No-Grouping’ rows

**Trendlines Tooltip chart** When trendlines are applied in the grid chart, the trendline tooltip will be different from the text tooltip. By default, trendlines tooltip is applied in the chart. It is smaller in size than text tooltip and cannot be customised. Below is the screenshot of the Trendlines tooltip.

Example of the trendlines tooltip Create a Vitara grid chart and apply trendlines for a metric and hover on a point of the trendline chart, you can see the tooltip.

# Transparency Slider #### Controlling Color Opacity with the Transparency Slider : New slider has been introduced that allows users to adjust the transparency of a specific color applied to regions where color opacity can be customized as required. This feature is available in the Thresholds, Appearance, Subtotals, Format, Tooltip, and Grand Totals tabs. Below is a sample GIF demonstrating how to use the transparency slider. By adjusting the transparency, a value in the chart can be hidden.

# Trend Lines ## Properties Menu - Trend Lines Trendlines in a grid chart provide a clear visual representation of the direction and pattern of data trends. This helps viewers quickly grasp the underlying patterns and make informed decisions based on the data displayed. Below is the screenshot of trendlines in the grid chart.

## Inputs Attributes: 2 or more\ Metrics: 1 or more\ In the Grid chart, the **trendlines are always applied for the second level grouped attribute** in the chart irrespective of the number of attributes. And that attribute is called the **‘trend by’** attribute. To use trendlines in a grid chart, **the grid should be either in grouped mode or pivoted**. To know about Grouping and Pivoting in Grid chart, click here There are **three types of trendlines** in the Vitara Grid chart. They are 1. Line Chart 2. Bar Chart 3. Bullet Chart ## Steps to apply trendlines ### **Step 1** Create a Grid chart with a minimum of 2 attributes and 1 metric. Drag an attribute with which you have to create groups into the Group dropzone.\ Below is the screenshot of a grid chart with 3 attributes and 2 metrics and the groups are created using the ‘year’ attribute.

### **Step 2** Hover onto a metric \[Revenue metric in this case] for which the trendlines need to be applied so that the hamburger button will be displayed. Click on the hamburger button, then a menu will be opened.\ Hover the mouse onto ‘Display as’, then a submenu will be opened which has the trendline charts. See the screenshot below:

### **Step 3** Click on the trendline of your choice on that menu. For example, we will click on the ‘Line chart’ here. Then the trendlines for the ‘Revenue’ metric looks the below way. See the screenshot. ![](/files/fJNZyM9FUSJvSmOHH9CB)\ \ If you have noticed the above screenshot, the ‘Category’ attribute got grouped automatically after applying trendlines for a metric. This is because the trendlines are always applied for the second attribute in the chart. ## Unsetting the Trendlines: After applying trendlines for metrics, we can remove them using the below steps. 1. Open the hamburger menu of the metric in which trendlines need to be removed. 2. Hover onto ‘Display as’ and wait for the submenu to open. 3. Click on the list item ‘value’. See the screenshot below.

\ Then the trendlines will be removed for that metric and value will be shown as in the screenshot attached in Step 1. ## Formatting the Trendlines: In Grid chart, we cannot simply apply trendlines but we can also format them. We can format the trendlines according to the type of chart applied. To go to the trendlines format window, apply trendlines for a metric and open its hamburger menu. Hover on to ‘Display as’ and wait for the submenu to open up. Click on ‘more options’.\ See the screenshot.

When you click on ‘more options’, the below window will be opened.

In the above screenshot, Trend Line Options for dropdown allows you to select a metric on which you need to apply trendlines.\ And Chart Type dropdown allows you to select a trendline chart for a particular metric selected in the above dropdown. ## **Let us look into chart-wise formattings** **1. Line Chart**\ For Line charts, we can format the line color and the final spot color.\ To start with, first apply the ‘Line Chart’ trendline for a metric and open the format window. Then set line color (e.g, red) and also the final spot color (e.g, blue). Click on ‘Apply’.\ See the screenshot below with applied formattings.

**2. Bar Chart**\ For Bar charts, we can format the bar colors and negative bar colors. To start with, first apply the ‘Bar Chart’ trendline for a metric and open the format window. Then set Bar color (e.g, green) and negative color (e.g, red). Click on ‘Apply’.\ See the screenshot below with applied formattings.

**3. Bullet Chart**\ For Bar charts, we can format the bar colors and negative bar colors. To start with, first apply the ‘Bullet Chart’ trendline for a metric and open the format window. Then set Actual color (e.g, green), Target color (e.g, red) and 3 band colors (e.g, blue, yellow and aqua). Click on ‘Apply’. See the screenshot below with applied formattings.

## **Axis Specificity** The line chart and bar chart as trend lines, user can select the specificity of the axis for the same.\ Earlier we default to using the same scale across all the rows for the same metric. Of course with this any large outliers are a problem. @e added an optional setting to not use the same scale and show each row’s trends independently.\ Now the customer can choose one of the option from the two, **a) same scale across all the rows for the same metric:**\ This is the default option and the minimum and maximum of the scale will be based on the minimum and maximum of that metric. **b) Apply at each cell:**\ Apply at each cell will be based on the trending minimum and maximum under a display group. In the below example the use these two options is explained in detail.\ As stated above, by defalut for each metric the bars hieght is set by considering minimum and maximum values from the entire metric. The least hieght of the bar corresponds to the minimum values of the metric and biggest bar corresponds to the maximum values of the metric.\ In the below screenshot, the category - Electronics has biggest numbers when compared to the other other categories. Therefore the hieght of the bars for other categories - Books, Movies, and Music are too small and not visible properly.\ The below screenshot is the vitara grid chart in which bars are set as trendlines.

\ If we want to make hieghts of the bar in each cell (group element) independent with other cell we have to choose the option - Apply at each cell. Click on hamburger button of the metric on which you want to enable this feature.

Expand the *“Display Style”* menu and select *“More Options”*.

Expand the **Scale** dropdown box and select the option - **Apply at each cell** and click on **Apply** button.

By selecting this option Vitara Grid chart will consider the maximum and minimum values with in the cell (group element) of that particular metric.\ For example, if we consider the *Cost* metric, from all the bars of *Books* category the least value is given smallest bar hieght and the maximum value is given the biggest bar hieght.\ Likewise the minimum and maximum values are calculated for each category of the metric instead of whole metric’s minimum and maximum values.

## Trend Lines — Start & End Value Options The Trendline scaling feature allows you to adjust the Start and End Values that determine how data is displayed. These values can be defined by specifying a fixed value, or setting them based on a percentile Hamburger Menu >> More options provides access to these properties. Below is the screenshot for reference.

### Example : Fixed Start Value **Steps:** 1. Navigate to Trendline Settings to a metric 2. Under Start Value, select Fixed Value. 3. Enter 30,000 and click Apply. 4. Leave End Value as Auto (or set another fixed value if required). 5. Review the chart — bar heights are recalculated from the new baseline of 30,000. Before applying Start Value

After applying Start Value = 30,000

when a Fixed Start Value (e.g., 30,000) is applied, the following changes are observed: * **Baseline Adjustment:** The bars no longer start from zero but from the specified start value (30,000). This recalculates the relative height of all bars. * **Data Emphasis:** Variations above the start value become more visible, helping in highlighting small differences that might otherwise be hidden when starting from zero. * **Comparative Clarity:** It becomes easier to compare values that are closer in range since the unnecessary portion below the baseline is excluded. ### **Example : Using a Fixed End Value** Steps 1. Open the Grid chart and navigate to Trendline Settings. 2. Under End Value, select Fixed Value. 3. Enter a desired value (e.g., 70,000) and click Apply. 4. Keep Start Value (eg : 30,000) 5. Review the chart — all bars are scaled relative to the fixed maximum of 70,000. Before applying Fixed End Value

After applying End Value = 70,000

**Observation** : When a Fixed End Value (e.g., 70,000) is applied: * **Consistent Upper Scale**: The chart’s maximum scale remains fixed at 70,000 even if the highest value is lower. * **Highlighting Gaps**: Bars may appear shorter if the data values are much lower than the fixed maximum. * **Flexibility**: Can be combined with a fixed start value for a fully customized scale range. Similarly, the Start and End Value settings can also be applied to other display styles, including horizontal bars/pins, line charts, and bullet charts. ### Bullet Chart For the “Bullet Chart” display style, users can customize the aggregation type and the color of the bands. Refer to the screenshot below for reference. ![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FooIy9J0pKHy8pmg4H2hW%252FTrend5.png%3Falt%3Dmedia%26token%3Dc6e07cd4-0e41-443d-a86e-0474e9ee8f7f\&width=768\&dpr=4\&quality=100\&sign=b9cddd32\&sv=2) ## Creating a Bullet Chart in a Grid Chart The Bullet Chart display style allows you to measure performance against a target, with colored bands indicating qualitative ranges such as Low, Medium, and High ### Example Use Case To analyse Region-wise Actual Sales and visualize the performance trend by Channel using a Bullet Chart , it includes bands to represent performance ranges (Low, Medium, High). **Data Setup Requirements** * Category: At least 2 attributes (e.g., Region, Channel). * Actual Sales : 1 metric (displayed as a bar). * Target: 1 metric (displayed as a tick). * Bands: Derived metrics based on the Target, used to define qualitative ranges such as Low, Medium, and High. ### Steps to Configure **Step 1: Add Attributes and Metrics** 1. Add **Region** and **Channel** as attributes. 2. Add **Actual Sales** and **Target** as metrics. 3. Place **Region** as the grouping attribute in the grid. **Step 2: Change Display Style to Bullet Chart** * Open the hamburger menu of Actual Sales * Select Display Style → Bullet Chart. * Configure the Target metric

**Step 3: Create Bands for Performance Ranges** Using the Target metric, define derived metrics to represent the qualitative bands: * Low Band = Target × 0.5 * Medium Band = Target × 0.8 * High Band = Target × 1.2 **How to create Derived Metrics:** 1. Right-click on the Target metric. 2. Select Create Metric. 3. Define the formula for the band (e.g., Target × 0.5 for Low Band) 4. Save the metric. 5. Repeat for Medium and High bands. Refer to the screenshot below for an example.

**Step 4: Add Bands to the Chart** * Add the derived band metrics to the grid. * Open Bullet Chart Settings and configure * Low Band → Sales below 50% of target * Medium Band → Sales between 50% and 80% * High Band → Sales above 80% Refer to the screenshot below for an example of the Bullet Chart Settings with the bands configured

**Step 5: Hide Band Columns** * Use the Hamburger Menu on each band column → select Hide Column. * This keeps the grid clean while preserving the Bullet Chart configuration. The screenshot below shows the Bullet Chart in Vitara Grid after the bands are configured

# Value Aggregation ## Properties Menu - Value Aggregation Once we apply to the group, we can apply value aggregations to the group headers. Click the hamburger button of the respective column on which you want to apply value aggregations. Expand the ‘Value Aggregations’ tab and select the aggregation function. Below is a screenshot of the ‘Value Aggregation’ tab.

Vitara grid chart allows applying only the aggregation functions which are listed in the ‘Value Aggregation’ tab. The default aggregation function is ‘Sum’. ## **Choose Column** In the ‘Value Aggregation’ tab of the grid chart, there are some basic functions that can be used to apply aggregations. If we want a function other than these functions, by using the ‘Choose Column’ option in the ‘Value Aggregation’ tab we can implement it. It is possible to use aggregation from a different metric (say metric B) as the aggregation for metric A. The way to set it up is to use both metric A and metric B on the grid. Now metric B is something you would define having the right type of aggregation at the desired dimensionality. On the Vitara Grid column for metric B, you would just choose a trivial aggregation (like first or last). In the column for metric A, choose aggregation and choose a column to select metric B. Now you can just hide column for metric B if you don’t want it displayed. ## Example For example, in the below screenshot group by is applied at the ‘ Category’ level. I want to show ‘value aggregation’ for profit metric as (Profit - Shipping Cost).

But using the Vitara grid chart ‘Value Aggregation’ formulas I can’t define this aggregation. The following is the procedure for defining this aggregation. #### **Step 1:** Define a derived metric using the formula we want in aggregation. Let us assume the derived metric name is ‘Actual Profit.’ " **Actual Profit = sum (Profit - (Shipping Cost ) )** "

#### **Step 2:** Add this metric to the grid chart.

We can verify in the screenshot, the value of ‘Actual Profit’ metric, is it showing exactly (Profit - Shipping Cost). The aggregation functions applied for ‘Profit’ and ‘Shipping Cost’ is Sum. #### **Step 3:** Apply aggregations like First, Last, Max or Min for ‘Actual Profit’ derived metric.

#### Step 4 The derived metric ‘Actual Profit’ currently displays the correct aggregated values that should also appear under the ‘Profit’ metric. To replicate this aggregation in the ‘Profit’ metric, open the ‘Value Aggregation’ settings for ‘Profit’, navigate to ‘Choose Column’, and select the derived metric ‘Actual Profit’.

**Step 5:** Now, as we defined the derived metric ‘Actual Profit’ for calculating value aggregation for the ‘Profit’ metric and we don’t need this metric in our grid chart, we can hide this metric. Click on the hamburger button of the ‘Actual Profit’ metric and select ‘Hide Column.’

Screenshot after hiding the ‘Actual Profit’ metric

## **Ratio Aggregation** In Vitara Grid chars we have a new aggregation function called ‘Ratio’. We can implement a ratio of two metrics as aggregation in the chart. The following is the screenshot of the ratio option.

When we select ‘Ratio’ as aggregation function a new ratio editor window will open. Below is the screenshot of the ratio editor window.

Apply all the required fields and click on the ‘Apply’ button. #### Column Totals When Column Totals are enabled, you can configure a separate aggregation for the total column. This aggregation applies only to the total column and does not impact the aggregation settings of the other columns. Please refer to the attached GIF for a visual reference.

**Note:** The **Ratio** and **Choose Column** functionalities are not supported for **Column Totals** or **Pivot Totals**. ### Pivot Totals **Default Behaviour with Pivot** When an aggregation is applied to primary (non-pivoted) columns, the same aggregation is automatically reflected in the row totals when Pivot Mode is enabled—unless a different aggregation is explicitly configured. **Pivot Group Metric Totals** **Note**: To enable Pivot Group Metric Totals, at least two attributes must be placed in the Pivot Drop Zone. * Only the outermost (parent) column in the pivot hierarchy supports custom aggregation for group metric totals. * Inner (child) group levels do not support separate aggregation logic. **Pivot Group Totals Limitation** No additional aggregation options are available for pivot group totals beyond the configured settings. Please refer to the attached GIF for a visual reference.

For more details on Pivot Row Totals, Pivot Group Totals, and Pivot Group Metric Totals,[ click here.](/grid-chart-guide/subtotals) # CUSTOMIZATION GUIDE ***Welcome to the Customization Guide for VitaraCharts!***** Here, you can explore various ways to tailor your charts to suit your needs. Learn how to *****customize CSS*****, implement *****custom CSS samples*****, define *****custom color palettes*****, integrate *****custom fonts*****, format metrics in *****condensed styles*****, apply *****grid custom CSS*****, and *****localize***** your charts for different languages and regions.** {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/00hpxhLFjqb7wjLblPDh" %} [Custom CSS](/customization-guide/custom-css) {% endcontent-ref %} {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/eOL6ZirOPAClMpJpq1Ug" %} [Custom CSS Samples](/customization-guide/custom-css-samples) {% endcontent-ref %} {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/X8ijf3XUkPjZ4Ejngndn" %} [Custom Color Palette](/customization-guide/custom-color-palette) {% endcontent-ref %} {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/4IpPMpLPQGMX45f77gCq" %} [Custom Fonts](/customization-guide/custom-fonts) {% endcontent-ref %} {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/6innX5KJQ6ZG8PMx4ihB" %} [Condensed Metric Format](/customization-guide/condensed-metric-format) {% endcontent-ref %} {% content-ref url="/spaces/uIDde50GEkigLbPmGgLx/pages/usxae35cpi4HMYA22iIa" %} [Grid Custom CSS](/customization-guide/grid-custom-css) {% endcontent-ref %} # Introduction **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." Please note that several of these features (linked to on the left) These requirements are noted on each the page. Please pay attention to this prior to trying out these features {% content-ref url="/pages/00hpxhLFjqb7wjLblPDh" %} [Custom CSS](/customization-guide/custom-css) {% endcontent-ref %} {% content-ref url="/pages/eOL6ZirOPAClMpJpq1Ug" %} [Custom CSS Samples](/customization-guide/custom-css-samples) {% endcontent-ref %} {% content-ref url="/pages/X8ijf3XUkPjZ4Ejngndn" %} [Custom Color Palette](/customization-guide/custom-color-palette) {% endcontent-ref %} {% content-ref url="/pages/4IpPMpLPQGMX45f77gCq" %} [Custom Fonts](/customization-guide/custom-fonts) {% endcontent-ref %} {% content-ref url="/pages/6innX5KJQ6ZG8PMx4ihB" %} [Condensed Metric Format](/customization-guide/condensed-metric-format) {% endcontent-ref %} {% content-ref url="/pages/usxae35cpi4HMYA22iIa" %} [Grid Custom CSS](/customization-guide/grid-custom-css) {% endcontent-ref %} {% content-ref url="/pages/kkBg7Z9WYjZyVl1wP3kU" %} [Localization](/customization-guide/localization) {% endcontent-ref %} # Custom CSS **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." These features are supported in the release 5.3.10 (or newer) **Important Note :** * For versions **older than 5.3.10**, do NOT include the .vitara namespace. The new .vitara prefix should be used **only from version 5.3.10 onward** **After making any changes, you must clear your browser’s cache to ensure the updates are reflected in Vitara Charts.** ## Custom CSS in Vitara Charts If you use custom CSS styles in Vitara Charts, no presentational characteristics (such as fill, stroke, font styles, and so on) are applied to the chart SVG. Instead, CSS is used to apply the design. To customize your styles, edit the customStyles.css file and add your own CSS rules. The customStyles.css file is located at, **\plugins\VitaraCharts\custom** The following is an overview of the CSS rules which are internally set on the VitaraCharts. ## CSS Rules ``` .vitara .vitara-chart-background ``` The chart area background. Use this to set the chart area background fills. ``` .vitara .vitara-plot-background ``` The plot area background. Use this to set the plot area background fills. ``` .vitara .vitara-category-axis ``` Class for the category axis. Use this to set the category axis labels text style. ``` .vitara .vitara-value-axis ``` Class for the value axis. Use this to set the value axis labels' text style. ``` .vitara .vitara-axis-title ``` The title of the axis. Set the axis title text style with this. To set the title of a given axis, use this class in conjunction with the category or value axis. Text characteristics such as font-family, font-style, color, text-decoration, text-transform, and letter-spacing can be changed. ``` .vitara .vitara-axis-line ``` The axis line is a straight line. Set the width and color of the axis line with this. To set the axis line attributes of a certain axis, use this class in conjunction with the category or value axis. ``` .vitara .vitara-line-display ``` The line series. Use this to set the default line style in any line series. Use this class in conjunction with the chart's class name to specifically set the line properties of that particular chart. Line properties like stroke-dasharray, stroke and stroke-width can be set. ``` .vitara .vitara-grid-line ``` The grid line. Use this to set the grid line properties. Line properties like stroke-dasharray, stroke and stroke-width can be set. ``` .vitara .vitara-legend-text ``` The legend item text. Use this to set the legend item text style. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing. ``` .vitara .vitara-marker ``` Can change the fills and strokes and sizes of markers on VitaraCharts selected from the Marker tab in the property editor. ``` .vitara .vitara-datalabel ``` The datalabel. Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing. ``` .vitara .vitara-point ``` * The default class for any data element on the chart. * For example, in bar chart a bar is a data element and in a bubble chart a bubble is a data element. * Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing. ### ### CSS Class Names of charts

Chart Name	Class Name
Vitara Bar Chart	.vitara.VitaraHCBarChart
Vitara Stacked Bar Chart	.vitara.VitaraHCStackedBarChart
Vitara Column Chart	.vitara.VitaraHCColumnChart
Vitara Stacked Column Chart	.vitara.VitaraHCStackedColumnChart
Vitara Pie Chart	.vitara.VitaraHCPieChart
Vitara KPI Ring Chart	.vitara.VitaraHCKPIRingChart
Vitara Line Chart	.vitara.VitaraHCLineChart
Vitara Area Chart	.vitara.VitaraHCAreaChart
Vitara Bubble Chart	.vitara.VitaraHCBubbleChart
Vitara Tornado Chart	.vitara.VitaraHCTornadoChart
Vitara Sparkline Chart	.vitara.VitaraHCSparklineChart
Vitara Heatmap Chart	.vitara.VitaraHCHeatmapChart
Vitara Funnel Chart	.vitara.VitaraHCFunnelChart
Vitara Column Range Chart	.vitara.VitaraHCColumnRangeChart
Vitara Bullet Chart	.vitara.VitaraHCBulletChart
Vitara Waterfall Chart	.vitara.VitaraHCWaterfallChart
Vitara KPI Animation Chart	.vitara.VitaraD3KPIAnimationChart
Vitara Calendar Heatmap	.vitara.VitaraD3CalHeatMapChart
Vitara Simple KPI Chart	.vitara.VitaraSimpleKPIChart
Vitara Waffle Chart	.vitara.VitaraD3WaffleChart
Vitara Dumbbell Chart	.vitara.VitaraHCDumbbellChart
Vitara Slope Chart	.vitara.VitaraHCSlopeChart
Vitara Circle Packing Chart	.vitara.VitaraD3CirclePackingChart
Vitara Angular Gauge Chart	.vitara.VitaraHCAngularGaugeChart
Vitara Sankey Chart	.vitara.VitaraHCSankeyChart

[ View sample implementations](/customization-guide/custom-css-samples) # Custom CSS Samples **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." These features are supported in the release 5.3.10 (or newer) **Important Note :** For versions **older than 5.3.10**, do NOT include the .vitara namespace. The new .vitara prefix should be used **only from version 5.3.10 onward** **Example Scenario: Styling Chart Elements** When styling chart elements, add “**.vitara**” followed by a **space** before the element class **Before 5.3.10 (older versions):** ``` .vitara-chart-background { fill: rgb(117, 245, 66); background-color: rgb(117, 245, 66); } ``` **From 5.3.10 onward:** ``` .vitara .vitara-chart-background { fill: rgb(117, 245, 66); background-color: rgb(117, 245, 66); } ``` **Styling Using Chart Classes** Add “**.vitara**” directly before the chart class name. **Note:** There should be no space between “**.vitara**” and the chart class (e.g., VitaraHCAngularGaugeChart). **Before 5.3.10 (older versions):** ``` .VitaraHCAngularGaugeChart .vitara-chart-background { fill: red; } ``` **From 5.3.10 onward:** ``` .vitara.VitaraHCAngularGaugeChart .vitara-chart-background { fill: red; } ``` ## Chart Area Background Applied chart area background color to be rgb(117, 245, 66)

.vitara .vitara-chart-background{
  fill: rgb(117, 245, 66);
  background-color: rgb(117, 245, 66)
}

## Plot Area Background Applied plot area background color to be #f5ad42 ``` .vitara .vitara-plot-background{ fill: #f5ad42; background-color: #f5ad42 } ```

## Axes Labels and Data Labels Applied the ChartArea background color to be rgb(117, 245, 66) The PlotArea background color to be #f5ad42 Both Category and Value axes labels font-size to be 15px, color fill to be red , font-family to be Impact and font-style to be italic For datalabels, the font-size to be 25px, color fill to be green and font-family to be Courier New ``` .vitara .vitara-chart-background{ fill: rgb(117, 245, 66); background-color: rgb(117, 245, 66) } .vitara .vitara-plot-background{ fill: #f5ad42; background-color: #f5ad42 } .vitara .vitara-category-axis, .vitara-value-axis { font-size: 15px; fill: red; font-family: Impact; font-style: italic; } .vitara .vitara-datalabel{ font-size: 25px; color: green; font-family: 'Courier New'; } ```

## Tooltip Applied the background color to be aqua , font family to be Comic Sans MS, Comic Sans, cursive and font size to be 35px ``` .vitara .vitara-tooltip{ font-family: "Comic Sans MS, Comic Sans", cursive; font-size: 35px; background-color: aqua; } ```

## Category Axis with title style different from the label style For labels, the color fill was rgb(197, 66, 245), the font family was Impact, the text decoration was underline, and the font size was 18px. The color fill for the title was #f56c42, the font family was Helvetica, the text decoration was underline, the font size was 25px, and the font style was italic. ``` .vitara .vitara-category-axis{ fill: rgb(197, 66, 245); text-decoration: underline; font-family: Impact; font-size: 18px } .vitara .vitara-category-axis .vitara-axis-title{ fill: #f56c42; text-decoration: underline; font-style: italic; font-family: Helvetica; font-size: 25px } ```

## Border around bars/columns with border styling Applied border to the column, stroke-width to be 2, stroke to be red and stroke-dasharray to be 5,5 ``` .vitara .vitara-point{ stroke-width: 2; stroke: red !important; stroke-dasharray: 5,5; } ```

## Line Chart with different line style set Applied stroke-width to be 2 and the stroke-dasharray to be 4,5,2 ``` .vitara .vitara-line-display{ stroke-width: 2; stroke-dasharray: 4,5,2; } ```

## Legend Styling Applied font-size to be 20px, the font-family to be Impact and fill to be red ``` .vitara .vitara-legend-text{ fill: red; font-family: Impact; font-size: 20px; } ```

## Customising Markers Applied font-size to be 14px, fill to be teal , stroke to be red , stroke-width to be 2 ``` .vitara .vitara-marker{ fill:teal; font-size: 14px; stroke:red; stroke-width: 2; } ```

## Customising Grid lines Applied stroke to be black , opacity to be 0.2, stroke-dasharray to be 6,6 ``` .vitara .vitara-grid-line{ stroke: black; opacity: 0.2; stroke-dasharray: 6,6; } ```

## Customising a property specific to one or more charts Applied fill to be palegreen for Pie chart background color ``` .vitara.VitaraHCPieChart .vitara-chart-background{ fill: palegreen; } ```

# Custom Color Palette **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ## Custom Color pallette in Vitara Charts Users can create custom color palettes for Vitara charts. VitaraCharts comes with three custom color palettes by default: **Corporate1**, **Corporate2** and **Corporate3**. In any of the Vitara chart, go to - edit → appearance → color palette.You may see these three color palettes if you expand the color palette tab. We can change the colors in existing color palettes and create new ones. ## Steps to create and deploy a custom color palette ### **Step 1:** Open the file named **global.txt** in the following path, **\plugins\VitaraCharts\custom** In this file, you can see the three properties called **palette.Corporate1**, **palette.Corporate2** and **palette.Corporate3**. These are the sample custom palettes’ declarations. Please refer the below screenshot of the ‘global.txt’ file.

### **Step 2:** Create a palette. Color names, hex values, and RGB values are all valid color values. As an example, ``` palette.Vitara=red,green,blue,#12ffd4,rgb(123,215,168) ``` ### **Step 3:** There is a palette.list property. This property contains all of the custom palettes (separated by commas) that must be reflected in the charts. Add the name of the custom palette that you want to see in the chart’s list of color palettes. As an example, ``` palette.list=Corporate1,Corporate2,Corporate3,Vitara ``` ### **Step 4:** To see the color palette applied on the chart, For example to select the palette named **Vitara**, Click ``` - Edit → Appearance → Color Palette → Vitara ``` Below is the screenshot of an existing custom palette **Corporate1** in the chart.

## Steps to set a custom palette as the default palette ### **Step 1:** There is a key in **global.txt** named **palette.defaultPalette**. So, you need to specify which custom palette defined in the **global.txt** should be the default palette for all the charts. For example, ``` palette.defaultPalette=Corporate3 ``` #### **Note:** * Palette will be shown as **Misconfigured** in the list of color palettes, on failed to parse user-defined palette from **global.txt**. For example, * If the default palette set in the **global.txt** is **misconfigured**, the color palette is defaulted to the chart’s default palette. * Users can define any number of colors in a given palette. * After adding any new color, refresh the answers to reflect the new color in Vitara charts. * You can disable any of these custom color palettes, add **#** at the starting of the palette definition. * You have to clear your the browser’s cache to reflect this change into any of the Vitara charts. # Custom Fonts **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ## Custom fonts in Vitara Charts Vitara Charts can display text, such as axes labels, data labels, or tooltips, in the text font styles specified by the customer. The processes for deploying custom fonts in Vitara charts are outlined below. ### **Step 1:** Copy the font file into the following path: ``` VitaraCharts\style\v535197\font ``` ### **Step 2:** Open customStyles.css file, which will be in the following path " **plugins\VitaraCharts\custom"** ### **Step 3:** Uncomment the “@font-face” container by deleting the text /\*\* (in first line) and the text \*\*/ (in the line number seven) ### **Step 4:** Delete the entire text in the second line: “Uncomment to introduce new font-family and make it available”. ### **Step 5:** Replace “font-family” with the name of the font you want to add. If your font name contains spaces, use quotation marks at the beginning and end of the name. For instance, ““Frutiger 45 Light.” ### **Step 6:** In src:url line copy the path of the folder in which we copied the font file. In the below example Hokjesgeest font is deployed. ``` @font-face { font-family: Hokjesgeest; src: url(../style/v430559/font/Hokjesgeest.ttf); } ``` Another example which has spaces in the font name: ``` @font-face { font-family: "Frutiger 45 Light"; src: url("../style/v430559/font/Frutiger 45 Light.ttf"); } ``` ### **Step 7:** If you want to add multiple custom fonts, then define font family for each custom font. ``` @font-face { font-family: fontello; src: url(../style/v430559/font/fontello.ttf); } ``` ### **Step 8:** List all the custom fonts names in the font vitara-chart-container. ``` .vitara .vitara-chart-container { font-family:Hokjesgeest, fontello, "Frutiger 45 Light", Arial, Helvetica, Verdana, sans-serif !important; } ``` Below is the screenshot of the updated “customStyle.css” file.

## **Steps to show the custom fonts in the font-family dropdowns in property editor and set a particular font as default font.** ### **Step 1:** Open the file named **global.txt** in the following path, \ \ **plugins\VitaraCharts\custom**\ In this file, you can find fields named font.customFonts and font.defaultFont ### **Step 2:** Include all the custom fonts specified in the font.customFonts key, each one separated by a comma (,). For example, ``` font.customFonts=OpenSans, Hokjesgeest, Frutiger 45 Light ``` ### **Step 3 (Custom font by default across all charts):** To set a font as default font for all charts, set the font.defaultFont key. For example, ``` font.defaultFont=Hokjesgeest ``` or ``` font.defaultFont=Frutiger 45 Light ``` Refresh your web browser and open Vitara Charts. Below is the screenshot of the custom font in the Vitara chart.

# Condensed Metric Format **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ## Metric suffixes used to shorten high numbers in axis labels and data labels Vitara charts will minimize the number in axis and data labels. The shortened metric suffixes can be changed to meet the needs of the user.

This can be accomplished by including the following code in the ‘global.txt’ file. The ‘global.txt’ file will be found in the Vitara charts plugin folder. Vitara charts → Custom folder → global.txt. ``` #Metric suffixes used to shorten high numbers in axis labels. #empty-value, space, null is discarded. shortFormatSymbols=k, M, B, T, P, E ``` In the preceding code, ‘k’ represents the suffix for 1000, M represents the suffix for 1000,000, B represents the suffix for 1,000,000,000, and so on. We can edit the suffix character in Vitara Charts to suit our needs. For example, the value 1, 000, 000, 000 is automatically shortened as 1B. If we want to alter the suffix ‘B’ to another character, like ‘G,’ we must replace ‘B’ with ‘G’ in the above code. ``` shortFormatSymbols=k, M, G, T, P, E ``` Save the ‘global.txt’ file and reopen your document. The below screenshot shows the new suffix ‘G’.

**Note**: If you still see the older suffix after reloading the dashboard, clear your browser’s cache and reload the dashboard. # Grid Custom CSS **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." Users can view customize grid chart by formatting the styles of rows and columns. Lets see those formattings below one by one. ## 1. Row Styles: ### **1.1 Styling all the rows** Each row in the grid can be commonly styled using the below class. ``` .vitara-row{ color:blue; background-color:lightblue !important; font-family:calibri; font-size:14px; } ``` Below is the screenshot with the above custom styles applied.

### **1.2 Styling Even/Odd rows** All the even rows in the grid can be styled using the below class ``` .vitara-row.vitara-grid-row-even{ color:white; background-color: lightseagreen; font-size:12px; font-family:verdana; } ``` All the odd rows in the grid can be styled using the below class ``` .vitara-row.vitara-grid-row-odd{ color:wheat; background-color:teal; font-family:helvetica; font-size:12px; } ``` Below is the screenshot which shows the applied styles for even and odd rows.

## 2. Grouped Row Styles ### **2.1 Styling all the grouped rows** To style all the grouped rows in the chart, use the below class. ``` .vitara-row.vitara-grid-row-group{ color:indigo !important; } ``` Below screenshot shows the above styles applied for the grouped rows.

### **2.2 Styling Even/Odd grouped rows** All the even grouped rows in the grid can be styled using the below class ``` .vitara-row.vitara-grid-row-even.vitara-grid-row-group{ color:orange; background-color:purple; font-family:lucida console; font-size:12px; font-weight:bold; } ``` All the odd grouped rows in the grid can be styled using the below class ``` .vitara-row.vitara-grid-row-odd.vitara-grid-row-group{ color:purple; background-color:orange; font-family:lucida console; font-size:12px; } ``` Below is the screenshot that shows the styles applied on odd and even grouped rows.

## 3.Styling the Headers ### **3.1 Styling the normal header** The headers in the grid can be styled using the below class. ``` .vitara-header.vitara-grid-header-cell { color:brown; font-size:15px; font-family:calibri; font-weight: bold; background-color:pink; } ``` Below screenshot shows the above styles applied on the header cell in the normal grid.

### **3.2 Styling the grouped header** Grouped header cells are formed by either pivoting or column grouping. These headers can be styled by using the below class. These styles will not be applied to the header cell in a normal(neither pivoted nor column grouped) grid. ``` .vitara-header.vitara-grid-grouped-header-cell{ color:blue; background-color:silver; } ``` Below screenshot shows the above styles applied on the grouped header cell.

## 4. Styling the Subtotals ### **4.1 Styling the Subtotal headers** Subtotal headers can be styled using the below class. ``` .vitara-grid-subtotals-header.vitara-grid-subtotals-cell{ color:yellow; background-color:orange; } ``` Below screenshot shows the above styles applied for the subtotal header.

### **4.2 Styling the Subtotal values** Subtotal values can be styled using the below class. ``` .vitara-grid-subtotals-value.vitara-grid-subtotals-cell{ color:yellow; background-color:orange; } ``` Below screenshot shows the above styles applied for the subtotal values.

## 5. Column Styles Every even column can be styled using the below class. ``` .vitara-grid-column:nth-child(2n){ color:#ff890f; background-color:#0ff888; font-weight:bold; font-family:verdana; font-size:11px; } ``` Every odd column can be styled using the below class. ``` .vitara-grid-column:nth-child(2n+1){ color:#fff; background-color:#ff8800; font-size:11px; font-family:verdana; } ``` Below is the screenshot that shows the applied styles for odd and even columns.

The styles applied for columns will also be reflected for Grand totals, to overcome those we will style grand totals using the below classes ``` .vitara-grand-totals-header.vitara-grand-totals-cell{ color:red; background-color:black; } .vitara-grand-totals-value.vitara-grand-totals-cell{ color:red; background-color:black; font-weight:unset; } ``` See the screenshot below which shows the grand total styles that overcomes the column styles applied on it

## 6. Grand Totals ### **6.1 Grand totals row** The entire grand totals row can be styled using the below class ``` .vitara-grand-totals.vitara-grand-totals{ color:white; background-color:brown !important; font-family:lucida console; font-weight:bold; } ``` See the below screenshot with the above properties applied.

### **6.2 Grand totals title** To style only the grand totals title, use the below class ``` .vitara-grand-totals-header.vitara-grand-totals-cell{ color:yellow; background-color:seagreen; font-family:helvetica; font-weight:bold; font-style:italic; } ``` See the screenshot with the above properties applied only to the grand totals title.

### **6.3 Grand totals values** To style only the grand totals’ values, use the below class. ``` .vitara-grand-totals-value.vitara-grand-totals-cell{ color:lightgreen; background-color:teal; font-family:verdana; font-style:italic; } ``` See the below screenshot with the above properties applied only to the grand totals values

#### Custom themes From 4.5 version of Vitara Charts, users can create their own themes and use those themes in Grid chart\ Two files in the VitaraCharts/custom/ folder are required to create custom themes. They are global.txt and customStyles.css. The CSS class names and properties will be added to the customStyles.ccs file. Consult the sections 1 through 6 above to learn more about CSS classes and properties. Themes will be listed in the global.txt file in order to make them visible in the property editor. **Step 1:** For example, if we have to create a theme named ‘theme1’ which styles even and odd rows of the grid chart. Then in customStyles.css file, the format of CSS code should be as ``` .Theme1 .vitara-row.vitara-grid-row-even{ color:white; background-color: lightseagreen; font-size:12px; font-family:verdana; } ``` ``` .Theme1 .vitara-row.vitara-grid-row-odd{ color:wheat; background-color:teal; font-family:helvetica; font-size:12px; } ``` The name of the theme is Theme1 in the code above. And, as you may have noticed, the theme name ‘Theme1’ is repeated, that is, the name appears in both the first and second pieces of code. According to the feature, the theme name should be repeated as many times as there are code blocks in order for certain styles to be applied solely to a single theme. Let’s make another theme that styles all of the rows and header cells. Also, the format should be as follows: ``` .Theme2 .vitara-row{ color:blue; background-color:lightblue !important; font-family:calibri; font-size:14px; } ``` ``` .Theme2 .vitara-header.vitara-grid-header-cell { color:brown; font-size:15px; font-family:calibri; font-weight: bold; background-color:pink; } ``` And in the above blocks of CSS code also, the theme name Theme2 is repeated. **Step 2:** Now, add those theme names to the global.txt file in the way shown below. Please keep in mind that theme names are case sensitive. As a result, the names should be the same as they are in customStyles.css. ``` gridThemes.themes=Theme1,Theme2 ``` The themes will then be listed in the grid chart. This can be verified in two ways: one using the property editor and the other through the context menu \[2020]. Please see the screenshots below. 1. Property Editor

2. Context menu

### **Step 3:** Now, apply Theme1 from either the property editor or context menu. Then the charts like below screenshot.

And apply Theme2. Then the chart looks like the screenshot below.

## **Base Themes** The base theme is the one to which custom theme styles are applied. A custom theme is always applied to a base theme. For example, we have a grid chart with the subject ‘Blue’. And now, when we apply a custom theme, the styles are applied to a white-based theme rather than a blue-based theme. This is due to the fact that all custom themes are by default based on the white theme. The grid chart saved with the ‘Blue’ theme is shown below in a screenshot.

After applying the custom theme ‘theme1’, the base theme gets changed to white. See the colors of headers and group dropzones in the below screenshot.

## **Changing the base theme:** The basic theme for custom themes can also be changed. The starting point might be an in-built theme or any customised theme. For example, if we want the default theme to be ‘Dark,’ add the following line to the global.txt file. ``` gridThemes.baseThemes=Dark ``` Apply the custom theme ‘Theme1’ now, and the styles will be applied to the ‘Dark’ base theme. Compare the screenshot below to the previous screenshot.

**Setting default theme** We can now set the Grid chart’s default theme as of Vitara Charts version 4.5. A built-in theme or a custom theme can be used as the default theme. For instance, if we want to make ‘Theme2’ a custom theme as the default theme, we would add the following to the global.txt file. ``` gridThemes.defaultTheme=Theme2 ``` # Localization **Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team." ## How to add support for a new language VitaraCharts editors are accessible in English, German, French, and Spanish out of the box. It is possible to add support for new local languages on your own. The steps are as follows: * Create a file MessageBundle\_\\_\.txt in directory /VitaraCharts/custom/ ``` Example: For “fr-fr” as user language, file name should be: MessageBundle_fr_fr.txt ``` * Copy the content from file VitaraCharts/custom/MessageBundle\_en\_us.txt in newly created file (MessageBundle\_\\_\.txt) * Add the respective translation for English string separated by “=” operator ``` Format: \=\ Example: Cell=Zelle ``` ## Preference Order for how lanugage resources are loaded * Language with regional Code (MessageBundle\_fr\_fr.txt ) * Language Only (MessageBundle\_fr.txt ) * Default (MessageBundle\_en\_us.txt) **NOTE** : If the translation for some keys are missing in the file then those keys will be displayed in English Language in the Property Editor # INSTALL DOCS # Production Deployment Vitaracharts Plug-in For Thoughtspot ## Install Instructions: This document outlines the installation and setup instructions for the Vitaracharts plugin on Thoughtspot. ### Prerequisites: Before installation, ensure the following requirements are met: * Admin access to Thoughtspot * Ability to modify security settings * Internet access to connect to \*.vitaracharts.com * **Access token from VitaraCharts**: Customers must request an access token from VitaraCharts before installation, if not already provided. VitaraCharts will generate and provide this token to the customers. ### Pre-Install Configuration: Prior to installation of the charts, the following configuration changes need to be made by the administrator 1\. Go to Developer -> All Orgs-> Customisations -> Security settings 2\. Add \*.[vitaracharts.com](http://vitaracharts.com/) in ‘Permitted iFrame domains’ and ‘CSP img-src domains’ ### **Installing VitaraCharts in Thoughtspot:** 1. Navigate to the **ADMIN** page 2. Click on **Chart Customization** 3. Select **Custom Charts** 4. Click **Add Chart** option and fill in the details as follows: * **Name**: Provide a suitable for the chart from the table below. * **Application URL**: Retrieve the corresponding URL from the table below. * **Access Token**: Enter the access token provided by Vitara here. * **Icon URL**: Retrieve the corresponding Icon URL from the table below. | **Visualization** | **Application Url** | **Icon Url** | | --------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | Vitara Bar Chart | | | | Vitara Column | | | | Vitara Line | | | | Vitara Sparkline | | | | Vitara Slope | | | | Vitara Area | | | | Vitara Stacked Bar | | | | Vitara Stacked Column | | | | Vitara Dumbbell | | | | Vitara Tornado | | | | Vitara Funnel | | | | Vitara Pie | | | | Vitara Angular Gauge | | | | Vitara Waffle | | | | Vitara Simple KPI | | | | Vitara KPI Animation | | | | Vitara Grid | | | | Vitara Waterfall | | | | Vitara Sankey | | | | Vitara KPI Ring | | | | Vitara Column Range | | | | Vitara Bullet | | | | Vitara Bubble | | | | Vitara Circle Packing | | | ### **Example: Vitara Grid Installation Screenshot** Below is an example screenshot showing the configuration for the Vitara Grid Chart in ThoughtSpot: Please note that fields highlighted in yellow are mandatory. Refer to the table above for the corresponding charts. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfhusdup9hTOefs6qffZ8JYr1N5hdHnbxwZ7m5WZqSozy1frOgDR99Ea94lt65ySHfY0veuC68m_zyPdV0c_1qt4LoXtSR1gk9SHYOOq_mM3V_DiDn4I30n3FWRzi9FH0VqAEt46w?key=EKK2F5w20MfMnuOJnVhuZHDh)
{% hint style="info" %} **After migrating from the trial version to production, clear the cache to ensure proper functionality.** {% endhint %} A quick video intro of Vitaracharts for Thoughtspot available here : After installation, Vitaracharts documentation can be accessed here: . For any questions or issues pertaining to Vitaracharts, contact us .
--- [Next Page](/llms-full.txt/1)