New! SVG chart endpoint for apps

🚧 Developers Coding Questions
1

Starting with 2.5.0.119, Hubitat platform has two simple endpoint to generate embedded charts for your apps. There are two endpoints that produce simple line and bar charts as SVG images.

Path Description
/hub2/chart/line Renders an SVG line chart from query parameters.
/hub2/chart/bar Renders an SVG bar chart from query parameters.

Successful responses use:

Content-Type: image/svg+xml

Validation failures return HTTP 400 with a JSON body:

{
  "success": false,
  "message": "Validation error message"
}

Query Parameters

These endpoints accept browser-friendly query parameters.

List values are comma-separated:

xValues=Mon,Tue,Wed
seriesTitles=Main%20Panel,EV%20Charger
seriesColors=2E86AB,F18F01

Multiple yValues series are separated by a pipe character. In browser URLs, encode the pipe as %7C:

yValues=28,31,29%7C9,12,10
Parameter Type Required Description
xValues comma-separated list Yes X-axis values.
yValues comma-separated list, or pipe-separated lists for multiple series Yes Y-axis values. A single series is a comma-separated list. Multiple series are separated with %7C.
seriesTitles comma-separated list No Titles for each series. Defaults to Series 1, Series 2, and so on.
seriesColors comma-separated list Yes Colors for each series. Every time series must have a color.
title string No Chart title. Hidden when plain=true.
xAxisTitle string No X-axis title. Hidden when plain=true.
yAxisTitle string No Y-axis title. Hidden when plain=true.
width positive integer No SVG chart width in pixels. Defaults to 800. Invalid or non-positive values use the default.
height positive integer No SVG chart height in pixels. Defaults to 600. Invalid or non-positive values use the default.
rotateXLabels boolean No When true, x-axis labels are rotated 45 degrees. Defaults to false.
plain boolean No When true, hides the chart title, axis titles, and legend. Defaults to false.

Color Values

Every time series must have a color.

Supported color formats:

2E86AB
#2E86AB
0x2E86AB
blue
red
green
black
white
gray
grey
darkgray
darkgrey
lightgray
lightgrey
cyan
magenta
orange
pink
yellow

X Values

Line chart x-values must be numeric or parseable as ISO-8601 date/time values.

Accepted line chart examples:

xValues=1,2,3
xValues=2026-04-01,2026-04-02,2026-04-03
xValues=2026-04-01T12:00:00,2026-04-02T12:00:00,2026-04-03T12:00:00

Bar chart x-values are rendered as category labels.

Validation Rules

  • xValues must be present and not empty.
  • yValues must be present and not empty.
  • Every series must have the same number of values as xValues.
  • Every y-value must be numeric.
  • Every series must have a valid color.

Browser Examples

Line chart with two daily household energy series

http://localhost:8080/hub2/chart/line?xValues=2026-04-01,2026-04-02,2026-04-03,2026-04-04,2026-04-05,2026-04-06,2026-04-07&yValues=28,31,29,33,36,40,35%7C9,12,10,8,14,18,11&seriesTitles=Main%20Panel,EV%20Charger&seriesColors=2E86AB,F18F01&title=Daily%20Energy%20Consumption&xAxisTitle=Day&yAxisTitle=kWh&rotateXLabels=false

Bar chart with the same data

http://localhost:8080/hub2/chart/bar?xValues=Mon,Tue,Wed,Thu,Fri,Sat,Sun&yValues=28,31,29,33,36,40,35%7C9,12,10,8,14,18,11&seriesTitles=Main%20Panel,EV%20Charger&seriesColors=2E86AB,F18F01&title=Daily%20Energy%20Consumption&xAxisTitle=Day&yAxisTitle=kWh&rotateXLabels=false

Plain bar chart without title, axis titles, or legend

http://localhost:8080/hub2/chart/bar?xValues=Mon,Tue,Wed,Thu,Fri,Sat,Sun&yValues=28,31,29,33,36,40,35&seriesTitles=Whole%20Home&seriesColors=2E86AB&plain=true

If embedding chart into app page, use relative URIs, e.g. /hub2/chart/bar?params

17 Likes