JSPM – juijs-chart@2.6.10

Package Exports

juijs-chart
juijs-chart/src/brush/area.js
juijs-chart/src/brush/bar.js
juijs-chart/src/brush/bubble.js
juijs-chart/src/brush/canvas/activebubble.js
juijs-chart/src/brush/canvas/bubblecloud.js
juijs-chart/src/brush/canvas/equalizercolumn.js
juijs-chart/src/brush/column.js
juijs-chart/src/brush/donut.js
juijs-chart/src/brush/focus.js
juijs-chart/src/brush/fullstackbar.js
juijs-chart/src/brush/fullstackcolumn.js
juijs-chart/src/brush/line.js
juijs-chart/src/brush/pie.js
juijs-chart/src/brush/polygon/column3d.js
juijs-chart/src/brush/polygon/line3d.js
juijs-chart/src/brush/rangearea.js
juijs-chart/src/brush/rangebar.js
juijs-chart/src/brush/rangecolumn.js
juijs-chart/src/brush/scatter.js
juijs-chart/src/brush/stackarea.js
juijs-chart/src/brush/stackbar.js
juijs-chart/src/brush/stackcolumn.js
juijs-chart/src/brush/treemap.js
juijs-chart/src/theme/classic.js
juijs-chart/src/theme/dark.js
juijs-chart/src/widget/canvas/picker.js
juijs-chart/src/widget/cross.js
juijs-chart/src/widget/legend.js
juijs-chart/src/widget/polygon/rotate3d.js
juijs-chart/src/widget/raycast.js
juijs-chart/src/widget/title.js
juijs-chart/src/widget/tooltip.js

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 (juijs-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

NPM

npm install juijs-chart

Browser

<script src="../dist/vendors.js"></script>
<script src="../dist/jui-chart.js"></script>

ES Modules

The difference with the existing method is that you need to add the module directly using the 'use' function.

import graph from 'juijs-chart'
import BarBrush from 'juijs-chart/src/brush/bar.js'
import ColumnBrush from 'juijs-chart/src/brush/column.js'
import TitleWidget from 'juijs-chart/src/widget/title.js'

graph.use(BarBrush, ColumnBrush, TitleWidget);

Usage

<div id="chart"></div>

The UI component creation code is the same as the existing one.

graph.ready([ "chart.builder" ], function(builder) {
    var obj = builder("#chart", {
        width: 600,
        height : 600,
        theme : "classic",
        axis : {
            x : {
                type : "block",
                domain : "quarter",
                line : true
            },
            y : {
                type : "range",
                domain : function(d) { return [d.sales, d.profit ]; },
                step : 3,
                line : true,
                orient : "right"
            },
            data : [
                { quarter : "1Q", sales : 1, profit : 3 },
                { quarter : "2Q", sales : 3, profit : 2 },
                { quarter : "3Q", sales : 10, profit : 1 },
                { quarter : "4Q", sales : 0.49, profit : 4}
            ]
        },
        brush : [{
            type : "column",
            target : [ "sales", "profit" ]
        }],
        widget : [{
            type: "title",
            text: "hihi"
        }]
    });
});