Grid Custom CSS
Last updated
Last updated
From 4.4 version of Vitara Charts, users can customize grid chart by formatting the styles of rows and columns. Lets see those formattings below one by one.
1.1 Styling all the rows
Each row in the grid can be commonly styled using the below class.
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
All the odd rows in the grid can be styled using the below class
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.
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
All the odd grouped rows in the grid can be styled using the below class
Below is the screenshot that shows the styles applied on odd and even grouped rows.
3.1 Styling the normal header
The headers in the grid can be styled using the below class.
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.
Below screenshot shows the above styles applied on the grouped header cell.
4. Styling the Subtotals
Subtotal headers can be styled using the below class.
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.
Below screenshot shows the above styles applied for the subtotal values.
Every even column can be styled using the below class.
Every odd column can be styled using the below class.
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
See the screenshot below which shows the grand total styles that overcomes the column styles applied on it
6.1 Grand totals row
The entire grand totals row can be styled using the below class
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
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.
See the below screenshot with the above properties applied only to the grand totals values
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
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:
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.
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.
Property Editor
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.
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.
