@visa/stacked-bar-chart v6.2.2

@visa/stacked-bar-chart

<stacked-bar-chart
  accessibility = {...}
  data = {[{"year":"2016","item":"A","value":-30},{data}]}
  groupAccessor = {"year"}
  ordinalAccessor = {"item"}
  valueAccessor = {"value"}
/>

# Installation Steps

• Using npm

  $ npm i @visa/stacked-bar-chart

• Using yarn

  $ yarn add @visa/stacked-bar-chart

# Props Documentation

# Base Props <>

ISubTitleType Definition

# Data Props <>

# Accessibility Props <>

IAccessibilityType Definition

// accessibility = { ...accessibility, onChangeFunc: d => changeHandler(d)}
// example of setting updates on page based on changeFunc custom events
const changeHandler = d => {
  if (d.updated && (d.removed || d.added)) {
    let updates = 'The stacked bar chart has ';
    if (d.removed) {
      updates += 'removed ' + d.removed + ' bar' + (d.removed > 1 ? 's ' : ' ');
    }
    if (d.added) {
      updates += (d.removed ? 'and ' : '') + 'added ' + d.added + (d.removed ? '' : d.added > 1 ? ' bars' : ' bar');
    }
    setChartUpdates(updates);
  } else if (d.updated) {
    const newUpdate = "The chart's data has changed, but no bars were removed or added.";
    setChartUpdates(
      newUpdate !== chartUpdates ? newUpdate : "The chart's data has changed again, but no bars were removed or added."
    );
  }
};

# Localization Props <>

ILocalizationType Definition

# Annotation Props <>

annotations object definition

annotations is an array of objects which needs to have the following properties within them. See the detailed api specifications from d3-svg-annotation, along with additional properties layered on top of that work, documented below.

# Axis Props <>

IAxisType Definition

# Event Props <>

Events in stencil.js dispatch Custom DOM events for other components to handle, we use Stencil's @Event() decorator to emit events (click, hover, mouseOut) from end user activity on our charts.

IClickStyleType Definition

IHoverStyleType Definition

// example of interactivity code
// note this only tracks a single click, you need your own logic to build the array of currnet selections made by user and then pass that result back to chart
//...
const clickHandler = evt => {
  const d = evt.detail.data; // data is located here
  const t = evt.detail.target; // chart mark/label clicked is located here

  this.currentClickedElement = [d]; // this is passed to clickHighlight prop
};

const hoverHandler = evt => {
  const d = evt.detail.data; // data is located here
  const t = evt.detail.target; // chart mark/label clicked is located here

  this.currentHoveredElement = d; // this is passed to hoverHighlight prop
};

const mouseOutHandler = evt => {
  this.currentHoveredElement = ''; // this is passed to hoverHighlight prop
};

// an example of calling these from within a stencil.js component
<stacked-bar-chart
  data=[{data}]
  ordinalAccessor="month"
  valueAccessor="value"
  groupAccessor="region"
  interactionKeys={['region']}
  onClickEvent={this.onClickEvent}
  clickHighlight={this.currentClickedElement}
  clickStyle={this.clickStyle}
  onHoverEvent={this.onHoverEvent}
  onMouseOutEvent={this.onMouseOut}
  hoverHighlight={this.currentHoveredElement}
  hoverStyle={this.hoverStyle}
/>
//...

# Label Props <>

IDataLabelType Definition

ILegendType Definition

ITooltipLabelType Definition

# Margin & Padding Props <>

IBoxModelType Definition

# Style Props <>

# Reference Line Props <>

IReferenceStyleType Definition

referenceLines object definition

referenceLines is an array of objects which needs to have the following properties within them.