Charts

NExS supports interactive charts that automatically update when your data changes. This guide covers chart types, data formatting, and styling options.

Adding a Chart

Charts overlay a rectangular block of cells within your view. You specify where the chart appears (the cell range it covers) and where its data comes from (the source range). The chart automatically renders on top of those cells, so you can position it precisely within your layout.

This configuration places a chart covering cells A10:E18, pulling its data from Sheet2.

Source Data Format

Your chart data should be organized like this:

• Row 1: Chart title, optionally followed by Y-axis label in brackets [label]
• Row 2: X-axis label (can be blank), then category labels
• Row 3+: Data point label, then values for each category

Example Output

This data produces a chart showing:

• Title: “Sales by Region”
• Y-axis label: “Revenue ($)”
• X-axis: Q1, Q2, Q3
• Three data series: North, South, West

Chart Types

Specify the chart type with the type option:

Available types:

Pie Charts

Pie charts use a simpler data format since they show parts of a whole rather than multiple series over time. Each row after the title becomes a slice, with the first column providing the label and the second providing the value.

Chart Options

Sorting

Automatically sort the X-axis:

Or use descending to reverse the order. For stacked charts, sorting is based on the total of all stacked values, and the chart re-sorts automatically when a viewer clicks a legend item to remove a series.

Data Orientation

For line, bar and column charts, each row after row 2 is a data point by default (row orientation). Pie charts default to column orientation. To transpose a line, bar or column chart (each row is a category):

Show Additional Data

For stacked charts, display totals or percentages:

Options: total (shows sum above each bar), percent (shows % on hover), or total, percent for both.

Y-Axis Range

NExS automatically scales the Y-axis to fit your data, but you can override this when you want consistent scales across charts or need to emphasize certain ranges. Setting explicit bounds ensures the chart doesn’t rescale unexpectedly as data changes.

Highlighting

Charts can highlight specific data points based on a cell value, creating interactive dashboards where selecting an item in one place emphasizes it in the chart. Point highlight at a cell, and when that cell’s value matches an X-axis label, that section lights up. Highlighting only applies to chart types that have an X axis.

Linking Charts

Multiple charts become more powerful when they interact. Linking charts creates coordinated behavior: clicking a legend item on a chart shows or hides the matching series or slice on every chart it links to, and clicking a pie slice highlights the matching series on linked line, area, bar and column charts.

To link charts, give the target chart a name, then add a linkTo row with that name to the chart that should drive it:

Rules for linking:

• Chart names must be unique across the whole app; a repeated name causes a “duplicate chart name” error on upload.
• Names in linkTo must match exactly, including case. Surrounding spaces are ignored. (This is stricter than keywords, which ignore case.)
• To link one chart to several others, add one linkTo row per target.
• Linked charts must be in the same view and share the same categories.
• A linkTo that names a chart that doesn’t exist, or one in a different view, is not caught on upload. It causes an error the first time someone clicks the source chart, so double-check your names.

Chart Styling

Color Palette

Customize colors for data series:

You can use hex values or color names like steelblue, coral, gold. Colors repeat if you have more categories than colors.

Font Size

Options: small, medium (default), large

Legend Position

Options: top, bottom (default), left, right, or none, off or hide to remove the legend. Add reversed to reverse the order, e.g. right, reversed.

Background and Colors

• backgroundColor — Chart background (default: transparent)
• alternateColor — Alternating Y-axis bands
• textColor — Titles, labels, ticks and legend items (default: black)
• highlightColor — X-axis highlight color (default: #ffffe0, light yellow)

Line Chart Options

• markers — Shapes: circle, square, diamond, triangle, triangle-down (default: all five, in that order). Shapes repeat if there are more categories than shapes
• markerSize — Size in pixels (default: 4; 0 = no markers)
• lineWidth — Line thickness (default: 2; 0 = no connecting lines)
• gradientFill — Gradient fill for area charts

Global Chart Options

Set defaults for all charts in the app section:

Individual chart settings override these defaults.

Complete Example

Dynamic Charts

Because chart source ranges can contain Excel formulas, your charts become truly interactive. When users adjust input values, the underlying formulas recalculate, and the chart updates instantly to reflect the new data. Time-based formulas, VLOOKUP results, and conditional calculations all flow through to the visualization automatically. This reactive behavior makes NExS charts ideal for building dashboards that respond to user input in real time.

Next Steps

• UI Components — Add sliders, LEDs, and buttons
• Views and Layouts — Create dashboard layouts
• Examples: Sales Dashboard — Complete dashboard example