VitaraCharts for ThoughtSpot
  • CHART USER GUIDE
    • Angular Gauge Chart
    • Bar/Column Chart
    • Combination Chart
    • Dumbbell Chart
    • Funnel Chart
    • Grid Chart
    • KPI Animation Chart
    • Line/Area line Chart
    • Pie Chart
    • Polar Charts
    • Slope Chart
    • Sparkline Chart
    • Stacked Column/Bar
    • Tornado Chart
    • Variwide Chart
    • Waffle Chart
    • Add as Filter
    • Allow/Block URLs
    • Auto Scroll
    • Axes
    • Background Images
    • Bar/Column Width
    • Color Picker with Opacity
    • Connect Null Points
    • Custom Markers
    • Data Markers
    • Data label customization
    • Download Answers
    • Error Bars
    • Export to PDF.
    • Formatting metric data
    • Gradient Threshold
    • Gradient Color
    • Legend
    • Negative Sign
    • Pattern Fill
    • Play Animation
    • Plot lines/Reference lines
    • Reset color property
    • Reset font properties
    • Right Click Menu
    • Series using Attribute
    • Small Multiples
    • Smooth Line
    • Tooltip Customization
    • Tooltip Links
  • GRID CHART GUIDE
    • Appearance
    • Auto Size
    • Column Totals
    • Custom markers
    • Custom Editor
    • Filter Data
    • Format/Clear Format
    • Grand Total
    • Pivoting and Row Grouping
    • Horizontal Bars/Pins
    • Manage Scaling Grouping
    • Manage Column Grouping
    • Manage Metric Grouping
    • Pin Column
    • Reset Columns
    • Show/Hide Column
    • Sorting
    • Subtotals
    • Thresholds
    • Tooltip
    • Trend Lines
    • Value Aggregation
  • CUSTOMIZATION GUIDE
    • Custom CSS
    • Custom CSS Samples
    • Custom Color Palette
    • Custom Fonts
    • Condensed Metric Format
    • Grid Custom CSS
  • INSTALL DOCS
    • Production Deployment
    • Trial Deployment
  • FAQ
    • Contact Us
    • FAQS
      • How we can do export to PDF
      • How can we define a custom color palette?
      • How can we define and use a new font?
      • How can customers reach Vitara technical support team?
      • How can I find the version of Vitaracharts installed?
      • Where can I find the chart state information?
Powered by GitBook
On this page
  • Category Axis
  • Multi level Axis rotation
  • Value Axis
  • Use Metric Formatting.
  • Tick interval
  • Start / End Values
  • Sync Axis
  • Label interval
  1. CHART USER GUIDE

Axes

PreviousAuto ScrollNextBackground Images

Last updated 1 month ago

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

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.

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:

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