lc_widget Slope

Slope Visualization with `lc_slope_*`

The lc_slope_* prefix is used for SVG element IDs that need to display slope data visualizations, ideal for showing trends, comparisons between two data points, and directional changes over time or categories.

Use Cases

Performance comparisons between two time periods
Before/after analysis and trend visualization
Sales performance tracking and revenue changes
Progress tracking and goal achievement
Comparative analysis between categories or segments
Change indicators and directional trends

Element Identification

The target element must be a <rect> with an ID that starts with lc_slope_* for slope chart visualizations.

Input Format

The input value must be provided as a JSON array of objects with the following structure:

JSON Format

A JSON string containing an array of objects with the following structure:

[
  {
    "start": 85000,
    "end": 92000,
    "color": "#2ecc71"
  },
  {
    "start": 78000,
    "end": 85000,
    "color": "#3498db"
  },
  {
    "start": 72000,
    "end": 68000,
    "color": "#e74c3c"
  }
]

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets with the following columns:

start	end	color
85000	92000	#2ecc71
78000	85000	#3498db
72000	68000	#e74c3c
125.5	142.25	#ff0000
98.75	87.3	#800080

Dataset Usage:

Connect your slope chart to a dataset containing the required columns
The system will automatically map the columns to the appropriate chart properties
Filter data by categories or time ranges to show relevant slope comparisons
Multiple rows create multi-line slope visualizations for comprehensive trend analysis

Important Notes:

Column names must match exactly as shown in the example (start, end, color)
Column names are case-sensitive and must be spelled exactly as specified
If data is not passed in the correct format or column names don’t match, the element will display as a plain <rect> without any slope visualization
The start and end fields must contain numeric values for proper slope calculation

Implementation Steps for Dataset Usage

To use dataset/CSV format with slope charts, follow these steps:

Create Dataset: Import your data containing the required columns (start, end, color)

Create Field: Create a field from your dataset that contains the slope chart data

Set Value Formatting: In the field settings, set Value Formatting to “JSON” - this is crucial for proper data formatting

Override SVG Variables: In the SVG slide design tab, go to “Override SVG Variables”

Select Variable: Choose your slope chart variable and use the format:

Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the slope chart will not work

Configuration Properties

Required Properties:

start: Numeric starting value for the slope line (mandatory)
end: Numeric ending value for the slope line (mandatory)

Optional Properties:

color: Color specification for the slope line, dots, and labels (optional)

Color Specifications

Single Color:

Provide a color value: "red", "#FF0000", "#2ecc71"
Uses CSS color names or hex values

Color Behavior:

If no color is provided, colors will be auto-assigned from the appearance settings and project color palette
Each slope line can have its own individual color specification
Colors ensure visual distinction between different slope lines

Visual Elements

Slope Lines: Connect start and end points showing direction and magnitude of change
Data Points: Visual indicators at start and end positions
Labels: Display actual values with proper positioning to avoid overlaps

Compatibility: Works with <rect> elements only

Example Usage

Example 1: Basic Sales Performance

[
  { "start": 85000, "end": 92000 },
  { "start": 78000, "end": 85000 },
  { "start": 72000, "end": 68000 }
]

Example 2: Custom Colors

[
  { "start": 125.5, "end": 142.25, "color": "#ff0000" },
  { "start": 98.75, "end": 87.3, "color": "#800080" },
  { "start": 210, "end": 235.8, "color": "#999999" }
]

Best Practices

Ensure start and end values are numeric

Slope Visualization with lc_slope_*