Skip to content

Can't display more than 2 swatches for quantitative data #826

@stevage

Description

@stevage

I'm not sure if this is a bug, a feature request or support request.

I have a dataset which has approx 10 discreet values, integers from 0 to 15.

I'd a like a legend to display a reasonable number of those values (most likely, all of them). I'm setting it up like this:

const plotEl = Plot.plot({
  marks: [
    Plot.rectY(
        expeditions,
        Plot.binX(
            { y: 'count' },
            {
                x: {
                    value: 'date',
                    interval: d3.utcMonth,
                },
                fill: 'participantsCount'
            }
        )
    ),
  ],
  background: '#222',
  width: document.getElementById('chart').getClientRects()[0].width,
      style: {
          background: '#222',
          color: 'white',
      },
  });
  const legendEl = plotEl.legend('color', {
      legend: 'swatches',
      columns: 8,
      style: { color: 'white', background: '#222' },
  });
  document.getElementById('chart').replaceChildren(plotEl);

I can't see anything in the docs that offers a way to display more swatches.

Result:

image

Of note:

  • only two swatches (min and max value)
  • also some strange artefacts that look like a 1 pixel height swatch

See in action here (select Show chart, Number of participants).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions