Skip to content

Formatting category Column/Bar Chart

The Category Properties are as follows:

Category - Category Type

Overview: If your data includes dates, you can personalize how they appear on your chart. Simply utilize the date format box to select your preferred date format. This feature enhances clarity and improves the presentation of your information, especially when dealing with date-type data.

Description: To set the category type as a date type, click on the Category Type dropdown and choose Date Axis. Once selected, the date axis will appear on the control box, and the date format option will become visible beside the dropdown. You can then adjust the date format as needed using the Date Format textbox. the default format of the date axis should be the yyyy-MM-dd

Image

Category - Cursor Tooltip

Overview: The Cursor Tooltip feature enables the display of tooltips on the category axis cursor by toggling the button. When activated, the chart provides details about data points when the mouse hovers over them. By default, the tooltip is disabled. You can enable it by setting the enable property to true.

Description: Click the toggle button to set it to true, then hover your mouse over the category cursor. The tooltip will appear as you hover.

Image

Category - Category Labels

Overview: Category labels can be added to a chart series by enabling the visible option in the categoryLabel. By default, the labels will arrange themselves smartly to avoid overlapping.

The Label properties govern all display types of the labels on the category axis. Users can truncate text, change label positions, choose from various alignments, adjust rotation, set a maximum label text length, and control label placement.

Description: The label toggle is enables by default, The text formats beside the toggle buttons shows the actions user can perform on text by making those toggle true, the list on alignment shows the text alignment user can choose from dropdown, The Rotation property make rotation on text from 0 to 360 degree and works only when alignment is none.

The Label properties overview as follows:

  • Label Enable/Disable: make the lable visible on the chart by use of toggle button.
  • Location: Relative location of the label.(0-1).
  • Truncate: Indicates if text lines need to be truncated if they do not fit, truncate overwrite alignment property.
  • Label Inverse: Indicates whether Axis’ labels and ticks should be drawn inside plot area.
  • Label Position Top: Indicates whether Axis should be drawn on the oppisite side of the plot area then it would normally be drawn based on chart’s settings.
  • Label Inside: Indicates whether Axis’ labels and ticks should be drawn inside plot area.
  • Alignment: Label intersection to none will make rotation working.
  • Rotation: Rotation of the element in degrees.(0-360), will work only when alignment is none.
  • Maximum Label Text Width: Maximum allowed width for the element in pixels.
  • Label Placement: Specifies the placement of label for category axis.
  • Label Distance: Minimum distance in pixels between grid elements, Default value is -1.
  • Edge Label Placement: the first label after 0 in category axis will be hidden.

Image

Category - Category Font Property

Overview: This control allows you to make font-related changes. You can adjust the Font color, Size, Weight, and Opacity from here. overall font properties are controled from here.

Description: Insert the required Font color, Font size, Weight and Opacity levels on font.

Image

Category - Category Ticks

Overview: Category ticks represent the intervals or divisions along the category axis of a chart. These ticks help in visually organizing and presenting data points. Adjustments such as width along with length, color, and opacity of category ticks can enhance the clarity and readability of the chart.

Description: Ticks are automatically enabled by default on the category axis. Within the controls, users can find options to customize the appearance of ticks. These include numeric controls for adjusting the width and length of ticks, as well as cosmetic properties such as color and opacity. These controls allow users to tailor the appearance of ticks to suit their preferences and enhance the overall visual presentation of the chart.

Image

Category - Category Alternate Fills

Overview: Category alternate fills refer to the background colors applied alternately to different categories on the axis of a chart. These fills help visually distinguish between categories and improve the overall clarity of the chart. Users can customize the colors and patterns of alternate fills to suit their requirement.

Description: By default, the category alternate fills property is turned off. Users can enable it to add fills to the chart. Once enabled, they can adjust the opacity and color of the fills using simple controls

Image

Category - Category Line

Overview: Category lines are automatically visible in charts by default. They play a crucial role in making chart presentations more relevant by neatly separating the category value titles from the chart plot.

Description: This property enables users to customize the category line by adjusting its border width, border opacity, and color.

Image

Category - Category Grid

Overview: In column charts, the category grid consists of lines in the background. These lines help organize the chart by providing a visual reference for the data.

Description: The chart grid is an additional line that appears in the background of column charts. Users can customize this line by choosing the color, adjusting the opacity levels, and setting the border width.

Image

Category - Category Title

Overview: The category title in charts serves as a label identifying the data categories or groups represented along the chart’s axis.

Description: This property is disabled by default, requiring users to enable it by clicking on the toggle button to set it to “true.” Once enabled, users can customize the category title using the following options:

  • Text Area: Users can enter the desired title text here.
  • Font Size: Users can specify the font size for the title.
  • Font Weight: Users can choose from options such as bold, bolder, lighter, etc., to adjust the weight of the title font.
  • Color: Users can select the color of the title text.

Image

General Properties
Category Axis Properties
Value Axis Properties
Series Properties
Legend Properties
Trend Line

Create Column/Bar Chart