Fix broken coordinate/mark examples, dark themes, add missing marks, add padding_of()

.github/copilot-instructions.md

@@ -86,6 +86,18 @@ no errors in the browser console. The workflow is:
    - The G2 chart renders without JavaScript errors.
    - No warnings or errors appear in the browser console.
 
+### Submitting Plot Changes in PRs
+
+When fixing or changing plot examples, **always submit screenshots** of the
+plots as PR comments so reviewers can see the visual results. Take screenshots
+in headless browsers (Playwright or Puppeteer) and attach them to the PR.
+
+### G2 Reference
+
+When in doubt about G2 features, marks, or coordinate systems, always refer to:
+- **G2 source repository**: https://github.com/antvis/G2
+- **G2 documentation site**: https://g2.antv.antgroup.com
+
 ## Project Structure
 
 ### Key Files and Directories

R/coordinate.R

@@ -6,6 +6,10 @@
 #' transforms such as `'transpose'` (equivalent to ggplot2's `coord_flip()`) or
 #' `'fisheye'`.
 #'
+#' The `'parallel'` coordinate requires a `position` encoding (a character
+#' vector of column names) instead of separate `x`/`y` encodings. For radar
+#' charts, use the `'polar'` coordinate with long-format data (x/y/color).
+#'
 #' @param chart A `g2` object.
 #' @param type Coordinate type string.
 #' @param ... Additional options such as `innerRadius`, `outerRadius`,
@@ -30,11 +34,26 @@
 #'   mark_interval() |>
 #'   coordinate('radial')
 #'
-#' # Parallel coordinate
+#' # Parallel coordinate (uses position encoding)
 #' g2(iris, position = c('Sepal.Length', 'Sepal.Width',
 #'     'Petal.Length', 'Petal.Width'), color = 'Species') |>
-#'   mark_line(transform = list(list(type = 'normalizeY'))) |>
-#'   coordinate('parallel')
+#'   mark_line() |>
+#'   coordinate('parallel') |>
+#'   legend_of('color', position = 'bottom')
+#'
+#' # Radar coordinate (polar with long-format data)
+#' df2 = data.frame(
+#'   item = rep(c('Design', 'Dev', 'Marketing', 'Sales', 'Support'), 2),
+#'   score = c(80, 90, 65, 75, 85, 60, 70, 85, 80, 70),
+#'   team = rep(c('A', 'B'), each = 5)
+#' )
+#' g2(df2, x = 'item', y = 'score', color = 'team') |>
+#'   mark_area(style = list(fillOpacity = 0.5)) |>
+#'   mark_line(style = list(lineWidth = 2)) |>
+#'   coordinate('polar') |>
+#'   scale_of('x', padding = 0.5, align = 0) |>
+#'   scale_of('y', domainMin = 0, domainMax = 100) |>
+#'   axis_of('x', grid = TRUE)
 coordinate = function(chart, type, ...) {
   chart$coords = c(list(type = type), list(...))
   chart

R/mark.R

@@ -248,16 +248,12 @@ mark_boxplot = function(chart, ...) mark(chart, 'boxplot', ...)
 
 #' Add a Density Mark
 #'
-#' A composite mark for kernel density estimation visualization.
+#' A composite mark for kernel density estimation visualization. Note that
+#' G2 v5 does not support the `kde` transform; use [mark_heatmap()] as an
+#' alternative for 2-D density visualizations.
 #'
 #' @inheritParams mark
 #' @export
-#' @examples
-#' g2(iris, x = 'Sepal.Width', y = 'Sepal.Length') |>
-#'   mark_density(
-#'     transform = list(list(type = 'kde')),
-#'     style = list(fill = 'steelblue', fillOpacity = 0.5)
-#'   )
 mark_density = function(chart, ...) mark(chart, 'density', ...)
 
 #' Add a Heatmap Mark
@@ -435,21 +431,9 @@ mark_shape = function(chart, ...) mark(chart, 'shape', ...)
 
 #' Add a Partition (Sunburst) Mark
 #'
+#' Note: the `partition` mark may not work correctly in G2 v5. Consider using
+#' [mark_treemap()] as an alternative for hierarchical data visualization.
+#'
 #' @inheritParams mark
 #' @export
-#' @examples
-#' tree_data = list(
-#'   name = 'root', children = list(
-#'     list(name = 'A', value = 10, children = list(
-#'       list(name = 'A1', value = 5), list(name = 'A2', value = 5)
-#'     )),
-#'     list(name = 'B', value = 20)
-#'   )
-#' )
-#' g2() |>
-#'   mark_partition(
-#'     data = list(value = tree_data),
-#'     encode = list(value = 'value'),
-#'     coordinate = list(type = 'theta', innerRadius = 0.3)
-#'   )
 mark_partition = function(chart, ...) mark(chart, 'partition', ...)

R/render.R

@@ -84,12 +84,18 @@ chart_html = function(chart, id = NULL, width = NULL, height = NULL) {
   defer_opt = getOption('gglite.defer_render')
   threshold = if (isTRUE(defer_opt)) 0.5 else if (is.numeric(defer_opt)) defer_opt
 
+  # G2 dark themes render content with light colors on a transparent canvas;
+  # set a dark background so the chart is visible on light pages
+  dark = isTRUE(chart$theme$type %in% c('dark', 'classicDark'))
   w = if (!is.null(width)) paste0('width:', width, 'px;') else ''
   h = if (!is.null(height)) paste0('height:', height, 'px;') else ''
-  style = paste0(w, h)
-  if (nzchar(style)) style = paste0(' style="', style, '"')
+  bg = if (dark) 'background-color:#141414;' else ''
 
   if (!is.null(threshold)) {
+    # Ensure container has min-height so IntersectionObserver can trigger
+    ch = if (is.null(ctor$height)) 480 else ctor$height
+    mh = paste0('min-height:', ch, 'px;')
+    style = paste0(w, h, bg, mh)
     spec_js = paste0('const spec = ', xfun::tojson(spec), ';\n')
     options_js = 'chart.options(spec);\n'
     render_js = paste0(
@@ -102,11 +108,14 @@ chart_html = function(chart, id = NULL, width = NULL, height = NULL) {
       ' }).observe(document.getElementById("', id, '"));\n'
     )
   } else {
+    style = paste0(w, h, bg)
     spec_js = ''
     options_js = paste0('chart.options(', xfun::tojson(spec), ');\n')
     render_js = 'chart.render();\n'
   }
 
+  if (nzchar(style)) style = paste0(' style="', style, '"')
+
   paste0(
     '<div id="', id, '"', style, '></div>\n',
     '<script type="module">\n',

examples/coordinates.Rmd

@@ -86,6 +86,54 @@ g2(df, x = 'x', y = 'y', color = 'x') |>
   coordinate('radial', innerRadius = 0.3)
 ```
 
+## Parallel
+
+Maps multiple numeric variables to parallel axes. Use a `position`
+encoding (a character vector of column names) instead of `x`/`y`.
+
+```{r}
+g2(iris, position = c('Sepal.Length', 'Sepal.Width',
+    'Petal.Length', 'Petal.Width'), color = 'Species') |>
+  mark_line() |>
+  coordinate('parallel') |>
+  legend_of('color', position = 'bottom')
+```
+
+## Radar
+
+Displays data on radial axes emanating from a center point. A radar chart
+is a line or area chart in polar coordinates. Use long-format data with
+`x` (category), `y` (value), and `color` (series) encodings. All values
+should be on the same scale (e.g., 0--100).
+
+```{r}
+df_radar = data.frame(
+  item = rep(c('Design', 'Dev', 'Marketing', 'Sales', 'Support'), 2),
+  score = c(80, 90, 65, 75, 85, 60, 70, 85, 80, 70),
+  team = rep(c('A', 'B'), each = 5)
+)
+g2(df_radar, x = 'item', y = 'score', color = 'team') |>
+  mark_area(style = list(fillOpacity = 0.5)) |>
+  mark_line(style = list(lineWidth = 2)) |>
+  mark_point() |>
+  coordinate('polar') |>
+  scale_of('x', padding = 0.5, align = 0) |>
+  scale_of('y', domainMin = 0, domainMax = 100) |>
+  axis_of('x', grid = TRUE) |>
+  axis_of('y', grid = TRUE, title = FALSE)
+```
+
+## Helix
+
+Arranges data along a helix spiral. Works best with `mark_interval()`.
+
+```{r}
+df_helix = data.frame(x = paste0('D', 1:50), y = abs(sin(1:50 / 5)))
+g2(df_helix, x = 'x', y = 'y', color = 'y') |>
+  mark_interval() |>
+  coordinate('helix')
+```
+
 ## Transpose (coord_flip)
 
 Swap x and y axes, equivalent to ggplot2's `coord_flip()`. This is a
@@ -98,11 +146,11 @@ g2(df, x = 'x', y = 'y') |>
   coord_transpose()
 ```
 
-### Transpose with polar
+### Transpose with radial
 
 ```{r}
 g2(df, x = 'x', y = 'y', color = 'x') |>
   mark_interval() |>
-  coordinate('polar') |>
+  coordinate('radial') |>
   coord_transpose()
 ```