Range Chart

Overview

The Line Chart widget in Flint is designed to display continuous data over time by connecting sequential data points with straight lines. It is particularly useful for visualizing real-time trends and patterns such as temperature changes, RPM, or speed variations.

This widget offers flexible configuration options and supports real-time data plotting, making it ideal for embedded HMI dashboards.

Steps to Use the Line Chart Widget

To set up and use the Line Chart in your project, follow the steps below:

  • Drag and drop the Line Chart widget from the widget toolbox onto the design view. Resize and position it as needed. Set a background image to align with your UI design.

  • In the Advanced Properties panel, define the X Pitch value (in pixels). This value determines the horizontal spacing between consecutive data points on the chart.

  • By default, the Line Chart contains three graphical layers: X-axis, Y-axis, Graph Chart (the actual plotted line). Additional layers can be added based on your requirements.

X-axis Properties

These settings control the appearance and behavior of the X-axis in the chart:

  • Line color - Sets the color of the X-axis line.

  • Element type – Defines the role of the layer. Choose X-axis, Y-axis, or Data.

  • Font - Font style used for the axis labels.

  • Axis labels color - Color of the label text on the X-axis.

  • Text Set Align – Controls label alignment – options include Left, Center, Right for horizontal

  • Text Direction – Orientation of the label text – choose from 0°, 90°, 180°, or 270°. Currently only 0° orientation is supported.

  • Line width - Sets the thickness of the X-axis line.

  • Graph Min and Max - Defines the minimum and maximum values displayed along the X-axis.

  • Num label – Specifies how many evenly spaced value labels should appear on the axis.

  • Axis offset – Adjusts the vertical position of the X-axis line.

  • Text offset – Adjusts the vertical position of the axis labels.

  • Text area width – Specifies the horizontal space allocated for displaying axis label text.

Y-axis Properties

The following properties configure the Y-axis, similar to the X-axis, with some additional chart-related options:

  • Line color - Sets the color of the Y-axis line.

  • Element type – Defines the axis role – X-axis, Y-axis, or Data.

  • Chart type – Select between Line, Range, or Bar to define the chart’s rendering mode.

  • Font - Font style for Y-axis labels.

  • Axis Labels color : Color of the Y-axis label text.

  • Text Set Align – Align text vertically and horizontally.

  • Text Direction – Orientation of label text – Normal, 90°, 180°, or 270°. Currently only 0° orientation is supported.

  • Line width - Thickness of the Y-axis line.

  • Graph Min and Max - Sets the minimum and maximum Y-axis values for the chart.

  • Num label – Number of evenly spaced value labels on the Y-axis.

  • Axis offset – Adjusts horizontal position of the Y-axis line.

  • Text offset – Adjusts the horizontal position of the axis labels.

  • Text area width – Width reserved for label display.

Graph Chart Properties

These settings control the appearance and behavior of the plotted line (graph data):

  • Line color - Defines the color of the graph line.

  • Element type – Specifies the element’s role – X-axis, Y-axis, or Data.

  • Chart type – Choose between Line, Range, or Bar chart types.

  • Data ID – Map the Graph data id, it must be of Single Precison with FIFO Buffer type.

  • Line width - Sets the thickness of the graph line.

  • Graph Min and Max - Defines the data range for plotting the values on the graph.

Once all properties are configured:, export the project and simulate. By providing data values , the chart will update in real time, plotting the line based on the input data.

Download the sample project for Line Chart from the Downloads Section .