kurkle/chartjs-chart-matrix

Datasets with X/Y values that don't map directly to the scale labels

duhmojo opened this issue · 3 comments

Is there a way to keep dataset X/Y values generic, numeric, while the displayed scale labels as human readable values?

With a category scale type where the labels need to be multilingual I would have to regenerate the dataset data with translated values, just so the cell will be placed correctly.

Here's an example of my dataset:

{x: 1, y: 1, v: 1}
1: {x: 1, y: 2, v: 2}
2: {x: 1, y: 3, v: 3}
3: {x: 1, y: 4, v: 4}
4: {x: 1, y: 5, v: 5}
5: {x: 2, y: 1, v: 2}
6: {x: 2, y: 2, v: 4}
7: {x: 2, y: 3, v: 6}
8: {x: 2, y: 4, v: 8}
9: {x: 2, y: 5, v: 10}
10: {x: 3, y: 1, v: 3}
11: {x: 3, y: 2, v: 6}
12: {x: 3, y: 3, v: 9}
13: {x: 3, y: 4, v: 12}
...

Here's my scales:

          scales: {
            x: { // impact
              type: 'category',
              labels: [ 'Insignificant', 'Minor', 'Moderate', 'Major', 'Severe' ],
              ticks: {
                stepSize: 1,
                display: true
              },
              grid: {
                display: false
              }
            },
            y: { // likelihood
              type: 'category',
              labels: [ 'Rare', 'Unlikely', 'Possible', 'Likely', 'Certain' ],
              offset: true,
              ticks: {
                stepSize: 1,
                display: true
              },
              grid: {
                display: false
              }
            }
          }

Here's the result:

image

If I switch to linear I have no control over the label names but the dataset is placed correctly:

image

Basically its not practical or efficient to require the dataset X/Y values to make to the label names if the label needs to change or differ where the value is larger. If I have a large chart (100x50) and the X/Y labels are names, I have to generate the dataset with every name in it.

Maybe I'm missing someone or there's a sample that covers this. Any tips would be great. Thanks for the great plugin!

That behavior with category scale looks like a bug.

You can use ticks.callback scale option with linear scale to map values to lables:

scales: {
  x: {
    type: 'linear',
    ticks: {
      callback(value, index, ticks) {
        return myCustomLalbes[value]; // or myCustomLabels[index];
      }
    }
  }
}

Thanks! I'll give it a try.

That worked for me, thanks.

    updatedWidgets['RiskMatrix'].props.options.scales.x.ticks.callback = (v, i, t) => {
      return impactLevels[i]
    }