Scales

Scales are an essential part of most visualizations and picasso.js comes bundled with a couple of them.

The scales in picasso.js are augmented d3 scales, where the main difference is tighter integration with data.

Using scales

Scales are used indirectly via the picasso.chart API. Where the chart API instantiate the scales. This approach allows the components object to use a scale instances by reference. It’s also possible to access via the chart instance API.

const chartInstance = picasso.chart({
  data,
  element,
  settings: {
    scales: {
      nameOfMyScale: {
        type: 'type-of-scale',
        data,
        aScaleProperty: true, // Add scale setting properties here
      },
    },
    components: [
      {
        type: 'some-component',
        scale: 'nameOfMyScale', // Pass the scale instance to the component
      },
    ],
  },
});


chartInstance.scales('nameOfMyScale'); // Returns a scale instance

Scale type deduction from data

If type property is omitted then it’s deducted depending on the data.

  • If there are extracted fields in data and all of them are set to type dimension then the type is set to band otherwise it’s set to linear as default

How can a scale be consumed

Depending on the context there are little variations, some components consume scales or data differently and some are very dependent on scales, here are some examples:

  • Axis component doesn’t take any data as input directly, instead the data is implicitly fetched from the referenced scale.
  • Box component requires a “major” and “minor” scale.

API Reference

Was this page helpful?