Package Exports

@data-ui/xy-chart

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@data-ui/xy-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@data-ui/xy-chart

A package of charts with standard x- and y- axes.

See it live at williaster.github.io/data-ui. More docs soon ✌️!

Example usage

import { XYPlot, BarSeries, XAxis, YAxis, LinearGradient } from '@data-ui/xy-chart';

/// ...
  <XYChart
    width={width}
    height={height}
    xScale={{ type: 'time' }}
    yScale={{ type: 'linear' }}
  >
    <LinearGradient
      id="my_fancy_gradient"
      from={startColor}
      to={endColor}
    />
    <XAxis label="X-axis Label" />
    <YAxis label="Y-axis Label" />
    <BarSeries
      data={timeSeriesData}
      fill="url('#my_fancy_gradient')"
    />
  </XYChart>

Components

Charts

<XYChart />

Axes

<XAxis />
<YAxis />

Series

<BarSeries />
<LineSeries />
<PointSeries />
<StackedBarSeries />
<GroupedBarSeries />
<IntervalSeries />

More coming.

Other

<PatternLines /> <LinearGradient />

A subset of vx gradients and patterns are exported in @data-ui/xy-chart to customize the style of series. These components create <def> elements in the chart SVG with ids that you can reference in another component.

Development

npm install
npm run dev # or 'prod'