@nebula.js/sn-line-chart

@nebula.js/sn-line-chart

The line chart is a common, widely used visualization. It is often used to show trends over time.

Installing

If you use npm: npm install @nebula.js/sn-line-chart. You can also load through the script tag directly from https://unpkg.com.

Usage

import { embed } from '@nebula.js/stardust';
import line from '@nebula.js/sn-line-chart';

// 'app' is an enigma app model
const nuked = embed(app, {
  types: [
    {
      // register line chart
      name: 'line-chart',
      load: () => Promise.resolve(line),
    },
  ],
});

nuked.render({
  element: document.querySelector('.lines'),
  type: 'line-chart',
  fields: ['Date.autoCalendar.YearMonth', '=Avg(Gold)', '=Avg(Bitcoin)'],

  // Overrides default properties
  properties: {
    title: 'Price of Gold and Bitcoin',
    dataPoint: {
      show: true,
      showLabels: true,
    },
    gridLine: {
      auto: false,
    },
    dimensionAxis: {
      show: 'all',
      dock: 'near',
    },
    measureAxis: {
      spacing: 0.5,
      dock: 'near',
      show: 'all',
      logarithmic: true,
    },
  },
});

More examples

One dimension, two measures, area styling

nuked.render({
  element: document.querySelector('.lines'),
  type: 'line-chart',
  fields: ['Date.autoCalendar.YearMonth', '=Avg(Gold)', '=Avg(Bitcoin)'],

  // Overrides default properties
  properties: {
    lineType: 'area',
  },
});

One dimension, two measures, vertical orientation

nuked.render({
  element: document.querySelector('.lines'),
  type: 'line-chart',
  fields: ['Date.autoCalendar.Quarter', 'Date.autoCalendar.Year', '=Avg(Bitcoin)'],

  // Overrides default properties
  properties: {
    orientation: 'vertical',
    dimensionAxis: {
      continuousAuto: false,
      dock: 'near',
    },
    dataPoint: {
      show: true,
      showLabels: true,
    },
    preferContinuousAxis: false,
  },
});

Two dimensions, one measure

nuked.render({
  element: document.querySelector('.lines'),
  type: 'line-chart',
  // Two dimensions, one measure
  fields: ['Date.autoCalendar.Quarter', 'Date.autoCalendar.Year', '=Avg(Bitcoin)'],
  properties: {
    measureAxis: {
      dock: 'near',
      show: 'all',
      logarithmic: true,
    },
    dataPoint: {
      show: true,
      showLabels: true,
    },
  },
});

One dimension, two measures, two reference lines

nuked.render({
      element: document.querySelector('.lines'),
      type: 'line-chart',
      fields: ['Date.autoCalendar.YearMonth', '=Avg(Gold)', '=Avg(Bitcoin)'],

      // Overrides default properties
      properties: {
        refLine: {
          refLines: [
            {
              label: '',
              paletteColor: {
                color: 'green',
              },
              refLineExpr: {
                value: 52500,
              },
              show: true,
            },
            {
              label: '',
              paletteColor: {
                color: 'red',
              },
              refLineExpr: {
                value: 3570,
              },
              show: true,
            },
          ],
        },
        measureAxis: {
          dock: 'near',
          show: 'all',
          logarithmic: true,
        },
        dataPoint: {
          show: true,
        },
      },
    });
  });

Changelog

1.7.0 (2021-08-24)

Features

• add properties option to Field function (#654) (65d402e)
• adjust generation of ext and meta files on creating template (#656) (c940d8b)
• give charts access to the nebula instance through useEmbed (#650) (0d19f69)