Skip to content

Generic Chart

The Generic Chart is a versatile component that allows you to visualize your data in a variety of chart formats, providing powerful insights and clear data representation.

Supported Chart Types

The Generic Chart supports four types of charts:

  • Bar
  • Line
  • Column
  • Scatter

You can choose the type that best suits your data and the message you want to convey.

Configuring Generic Chart

Customize the Generic Chart's behavior and appearance to fit your specific needs using the available configuration options.

  • Data Population: The only way you can populate the Generic Chart with data is through data sources. You can achieve that by following these steps:

  • Drag and drop the Generic Chart component from the components bar into a page of the report or a flow.

  • Select the Generic Chart component and navigate to Series Configuration within Data Options on the right sidebar.
  • In the newly opened window, select +Add Series.
  • Populate the Series Config with all the necessary data: Name, Chart type, Data Source, X field, and Y field.

  • Click on the Save button. Once the above steps are complete, the data should be displayed within the chart in the manner that you have previously configured.

  • Chart Positioning: Adjust the Top, Left, Right, and Bottom positioning of the chart within its container.

  • Grid Lines: Toggle the visibility of Show horizontal grid lines and Show vertical grid lines.

  • Auto Size: Enable or disable automatic sizing of the chart.

  • Zero Marker Lines: Control the visibility of Show X axis zero marker line, Show Y axis zero marker line, and Show zero marker lines over series.

  • Clip Rect: Toggle the clipping of chart elements to the chart area.

  • Axis Configuration (X/Y Axis):

  • Axis Type: (e.g., Category)

  • Format: Define the display format for axis labels.
  • Width/Height per Category (px): Set dimensions per category for layout control.
  • Label Orientation, Rotation, Anchor, Offset, Min. Label Distance: Fine-tune the positioning and appearance of axis labels.
  • Min. Line Length, Min. Tick Distance, Tick Size, Tick Offset: Control the visual properties of axis lines and ticks.
  • Label Style (element.style): Apply custom CSS styles directly to axis labels for advanced customization.

  • Invert Axis, Alternate side, Wrap Label, Hide Labels, Hide Line, Hide Ticks, Use Gridline Ticks: Toggles for various display behaviors of the axis.

  • Series Configuration:

  • Name: Name of the data series.
  • Chart Type: (e.g., Bar, Line, Column, Scatter)
  • Data Source: Data source for the series.
  • Sort Field: Field used for sorting data within the series.
  • X Field / Y Field: Map data fields to the X and Y axes.
  • Data Labels:
    • Show: Toggle visibility of data labels.
    • Placement, Distance, Width, Height: Control data label positioning and size.
  • Value Template: Define a template for displaying data label values.
  • Rectangle Style / Text Style (element.style): Apply custom CSS to the visual elements (e.g., bars, points) and text labels of the series.
  • Repeat: Option to repeat the series based on a data source.

Generic Styling Summary

In addition to customizing the axes, you can also change the styling of your chart. The styling options you choose in the component's editor will override the settings in the theme. This gives you the flexibility to make your chart look exactly the way you want it to.

Important Notes & Tips

Keep these points in mind when working with the Generic Chart:

  • Before attempting to add data to the chart, make sure that you have already created a data source, as you won't be able to select one in step 4 of the data population process.
  • The Series Configuration is crucial for defining how your data is plotted on the chart.
  • Extensive styling options are available for precise visual control, including direct CSS manipulation via element.style.