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
  • Custom CSS in Vitara Charts
  • CSS Rules
  1. CUSTOMIZATION GUIDE

Custom CSS

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,

The following is an overview of the CSS rules which are internally set on the VitaraCharts.

CSS Rules

.vitara-chart-background

The chart area background. Use this to set the chart area background fills.

.vitara-plot-background

The plot area background. Use this to set the plot area background fills.

.vitara-category-axis

Class for the category axis. Use this to set the category axis labels text style.

.vitara-value-axis

Class for the value axis. Use this to set the value axis labels' text style.

.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-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-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-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-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-marker

Can change the fills and strokes and sizes of markers on VitaraCharts selected from the Marker tab in the property editor.

.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-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.

PreviousCUSTOMIZATION GUIDENextCustom CSS Samples

Last updated 6 months ago

### CSS Class Names of charts | Chart Name | Class Name | | :--------------------------- | :-------------------------- | | Vitara Bar Chart | .VitaraHCBarChart | | Vitara Stacked Bar Chart | .VitaraHCStackedBarChart | | Vitara Column Chart | .VitaraHCColumnChart | | Vitara Stacked Column Chart | .VitaraHCStackedColumnChart | | Vitara Pie Chart | .VitaraHCPieChart | | Vitara Line Chart | .VitaraHCLineChart | | Vitara Area Chart | .VitaraHCAreaChart | | Vitara Tornado Chart | .VitaraHCTornadoChart | | Vitara Sparkline Chart | .VitaraHCSparklineChart | | Vitara Funnel Chart | .VitaraHCFunnelChart | | Vitara KPI Animation Chart | .VitaraKPIAnimationChart | | Vitara Simple KPI Chart | .VitaraSimpleKPIChart | | Vitara Dumbbell Chart | .VitaraHCDumbbellChart | | Vitara Slope Chart | .VitaraHCSlopeChart | | Vitara Circle Packing Chart | .VitaraD3CirclePackingChart | | Vitara Angular Gauge Chart | .VitaraHCAngularGaugeChart |

View sample implementations