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.

Data Orientation

By default, each row after row 2 is a data point. To transpose (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.

Linking Charts

Multiple charts become more powerful when they interact. Linking charts creates coordinated behavior—clicking a pie slice highlights the corresponding data in linked bar charts, and clicking legend items toggles series visibility across all linked charts simultaneously.

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, none (hide), or right, reversed for reversed order.

Background and Colors

• alternateColor — Alternating Y-axis bands
• textColor — Titles, labels, ticks
• highlightColor — X-axis highlight color

Line Chart Options

• markers — Shapes: circle, square, diamond, triangle, triangle-down
• markerSize — Size in pixels (0 = no markers)
• lineWidth — Line thickness (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