chartjs-plugin-stanford-diagram

    1.7.0 • Public • Published

    Chart.js Stanford Diagram plugin

    Adds support for Stanford Diagrams to Chart.js.

    Screenshot

    Configuration

    Data

    Use an array of objects as shown bellow:

    {
      x: VALUE,
      y: VALUE,
      epochs: VALUE
    }

    Regions

    You can regions to your chart (any type of polygon).

    A region can be a polygon outline, a filled polygon or both. WARN: You need to add a color to fillColor or strokeColor.

    You can also add text associated to the polygon, as show in the object below.

    Each value can be a Number, or the strings:

    • 'MAX_X' - The max visible value in the X axis;
    • 'MAX_Y' - The max visible value in the Y axis;
    • 'MAX_XY' - The lowest between the max visible values of the X or the Y axis.

    Region Object

    {
      points: [ // Add any number of points counterclockwise
        { x: VALUE1, y: VALUE1 },
        { x: VALUE2, y: VALUE2 },
        { x: VALUE3, y: VALUE3 }
      ],
      fillColor: 'anycolor', // Optional. Add a color to fill the region
      strokeColor: 'anycolor', // Optional. Add a color to stroke the region
      text: { // Optional
        x: VALUE,
        y: VALUE,
        color: 'anycolor',
        format: function (count, percentage) {
          // Count: The number of epochs in the region
          // Percentage: The percentage of epochs in the region
     
          return 'anystring';
        }
      }
    }

    Other Configurations

    Tooltip

    You can get the epoch value by using the item index:

    let epochs = data.datasets[0].data[item.index].epochs;

    Epochs tooltip name

    stanfordDiagram: {
      epochsLabel: 'Samples' // Change the name of 'epochs' on the tooltip
    }

    Scale Legend

    stanfordDiagram: {
      legendLabel: 'Number of samples (epochs) per point' // Change the color scale label text
    }

    Max scale value

    stanfordDiagram: {
      maxEpochs: 10000 // Change the max value on the scale
    }

    Count points outside visible area (in regions)

    stanfordDiagram: {
      countOnlyVisible: false // If the points outside the visible area should be counted in regions
    }

    Percentage configuration (in regions)

    There are two options to configure the percentage for the region text.

    1. Object with decimalPlaces and roundingMethod:

      stanfordDiagram: {
        percentage: {
          decimalPlaces: 1, // The number of decimal places to show. Default: 1
          roundingMethod: 'round' // The rounding method to use. Default: 'round'
        }
      }

      Available rounding methods:

    2. Use an Intl.NumberFormat with { style: 'percent' }:

      stanfordDiagram: {
        percentage: new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 5})
      }

    Example

    import { stanfordDiagramPlugin } from 'chartjs-plugin-stanford-diagram';
     
    const ctx = document.getElementById('myChart')
      .getContext('2d');
     
    new Chart(ctx, {
      type: 'stanford',
      data: {
        labels: 'Custom Data Set',
        datasets: [
          {
            data: [
              { x: 1, y: 3, epochs: 5 },
              { x: 5, y: 9, epochs: 15 }
            ]
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'HPE (m)'
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'HPL (m)'
            }
          }]
        },
        plugins: {
          stanfordDiagram: {
            epochsLabel: 'Samples', // Change the name of 'epochs' on the tooltip
            legendLabel: 'Number of samples (epochs) per point', // Change the color scale label text
            maxEpochs: 10000, // Change the max value on the scale
            countOnlyVisible: true,
            percentage: new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 5}),
            regions: [
              {
                points: [ // Add points counter-clockwise
                  { x: 0, y: 0 },
                  { x: 40, y: 40 },
                  { x: 0, y: 40 },
                ],
                strokeColor: 'rgba(0, 0, 0, 0.5)',
                fillcolor: 'rgba(0, 0, 0, 0.3)',
                text: {
                  x: 15,
                  y: 35,
                  color: 'black',
                  format: function (value, percentage) {
                    return `Normal Operations: ${value} (${percentage}%)`;
                  }
                }
              }
            ]
          }
        }
      },
      plugins: [stanfordDiagramPlugin]
    });

    Building

    To build the plugin run:

    npm install
    npm run build

    Install

    npm i chartjs-plugin-stanford-diagram

    DownloadsWeekly Downloads

    9

    Version

    1.7.0

    License

    MIT

    Unpacked Size

    243 kB

    Total Files

    21

    Last publish

    Collaborators

    • freezing117