EChartify v0.2.0 Release Notes

Release Date: 2026-04-26

Overview

EChartify v0.2.0 adds support for 6 new geometry types, expanding the chart visualization capabilities to include radar, funnel, gauge, heatmap, treemap, and sankey diagrams.

Highlights

• 6 new geometry types - Radar, funnel, gauge, heatmap, treemap, and sankey charts
• Extended encode fields - New fields for specialized chart data mappings
• Geometry-specific styling - Style properties for gauge, heatmap, and funnel charts

New Geometry Types

Geometry	Description	Use Case
radar	Radar/spider chart	Multi-dimensional data comparison
funnel	Funnel chart	Conversion pipelines, sales funnels
gauge	Gauge/meter chart	KPIs, progress indicators
heatmap	Heatmap visualization	Density, correlation matrices
treemap	Treemap chart	Hierarchical data, proportional areas
sankey	Sankey/flow diagram	Flow relationships, energy diagrams

New Encode Fields

Field	Charts	Description
category	radar	Category/dimension column
indicator	radar	Indicator values column
source	sankey	Source node column
target	sankey	Target node column
heat	heatmap	Heat intensity column

New Style Properties

Gauge Properties

Property	Type	Description
gaugeMin	number	Minimum gauge value
gaugeMax	number	Maximum gauge value
startAngle	number	Start angle in degrees
endAngle	number	End angle in degrees

Heatmap Properties

Property	Type	Description
heatMin	number	Minimum heat value for color scale
heatMax	number	Maximum heat value for color scale

Funnel Properties

Property	Type	Description
funnelAlign	string	Alignment: "left", "center", "right"
funnelSort	string	Sort order: "ascending", "descending", "none"
funnelGap	number	Gap between funnel segments

Example: Gauge Chart

{
  "title": "Performance Score",
  "datasets": [{
    "id": "score",
    "columns": [{ "name": "value", "type": "number" }],
    "rows": [["75"]]
  }],
  "marks": [{
    "id": "gauge",
    "datasetId": "score",
    "geometry": "gauge",
    "encode": { "value": "value" },
    "style": {
      "gaugeMin": 0,
      "gaugeMax": 100,
      "startAngle": 225,
      "endAngle": -45
    }
  }]
}

Example: Sankey Diagram

{
  "title": "Energy Flow",
  "datasets": [{
    "id": "flow",
    "columns": [
      { "name": "source", "type": "string" },
      { "name": "target", "type": "string" },
      { "name": "value", "type": "number" }
    ],
    "rows": [
      ["Solar", "Grid", "100"],
      ["Wind", "Grid", "80"],
      ["Grid", "Industry", "120"],
      ["Grid", "Residential", "60"]
    ]
  }],
  "marks": [{
    "id": "sankey",
    "datasetId": "flow",
    "geometry": "sankey",
    "encode": {
      "source": "source",
      "target": "target",
      "value": "value"
    }
  }]
}

Installation

# TypeScript/JavaScript
npm install @grokify/echartify@0.2.0

# Go
go get github.com/grokify/echartify@v0.2.0

Full Changelog

See CHANGELOG.md for complete details.