New Feature: Support string x values

[julianna-langston]

Let's say you want to create a simple bar chart that shows how many moon Mercury, Venus, Earth, and Mars have. You could do that in a couple of ways:

Option 1: Using formats

const planets = ["Mercury", "Venus", "Earth", "Mars"];
c2mChart({
  type: "bar",
  data: [0,0,1,2],
  axes: {
    x: {
      format: (index) => planets[index]
    }
  }
});

Option 2: Using valueLabels

const planets = ["Mercury", "Venus", "Earth", "Mars"];
c2mChart({
  type: "bar",
  data: [0,0,1,2],
  axes: {
    x: {
      valueLabels: planets
    }
  }
});

However, this is separating out the data with the labels. If we kept the 2 together, we could instead do something like this:

c2mChart({
  type: "bar",
  data: [
    {x: "Mercury", y: 0},
    {x: "Venus", y: 0},
    {x: "Earth", y: 1},
    {x: "Mars", y: 2}
  ]
});

Note that this isn't simply a matter of finding a new way to do the same thing. The data value supports data points that are either numbers or objects; if the data points are object, then x is required and must be a number. If you need to use an object (eg, the chart is a box plot, or you want to leverage the custom property for a callback), then you need to use a numeric x value, even when it doesn't make sense.

Here is the data for a chart showing the first 4 planets, showing how close and how far they get from the sun. Note how each data point has an x value that simply duplicates its own index:

const planets = ["Mercury", "Venus", "Earth", "Mars"];
c2mChart({
  type: "bar",
  data: [
    {
      x: 0,
      high: .466, // Measured in Astronomical Units
      low: .307
    },
    {
      x: 1,
      high: .728,
      low: .718
    },
    {
      x: 2,
      high: 1.016,
      low: .983
    },
    {
      x: 3,
      high: 1.666
      low: 1.381
    },
  ],
  axes: {
    x: {
      valueLabels: planets
    }
  }
});

In this case, it makes more sense to be able to just put down:

{x: "Mercury", high: .466, low: .307}

instead of duplicating index values and juggling where the data was placed.