• Jump To … +
    butterfly_example.ts dark_example.ts flamechart_example.ts icicle_sunburst_example.ts legend_example.ts pie_example.ts plot_area_example.ts plot_zoom_example.ts region_example.ts sankey_example.ts scatterplot_example.ts stack_example.ts swimlanes_example.ts sync_example.ts table_searchable_example.ts table_selectable_example.ts table_sortable_example.ts timeline_example.ts worldbank_example.ts
  • ¶

    C3 Plot Regions

    Demonstrate moveable regions in a Plot

  • ¶

    Chart Plot Legend

  • ¶

    Create a chart with various layers for demonstration purposes. We will then link a plot_legend to this chart. Notice how the name properties of each layer and stack is used in the legend.

    var region_layer: c3.Plot.Layer.Region<number>;
var plot = new c3.Plot({
    anchor: <HTMLElement>document.querySelector('#region_example'),
    anchor_styles: { 'display': 'inline-block', 'margin-left': '10%' },
    height: 300,
    width: '80%',
  • ¶

    This chart will treat the value of data elements as the Y value and the index of the element as the X value.

        h: d3.scale.linear().domain([0, 100]),
    v: d3.scale.linear().domain([0, 1]),
  • ¶

    Add a horizontal axis with grid lines.

        axes: [
        new c3.Axis.X({
            grid: true,
        }),
    ],

    layers: [
  • ¶

    Add a silly line layer for the background

            new c3.Plot.Layer.Line<number>({
            data: (() => {
                const data = [];
                for (let i = 0; i < 100; i++) {
                    data.push(Math.random());
                }
                return data;
            })(),
            x: (d, i) => i,
            y: (d) => d,
            path_options: { styles: { stroke: 'darkblue' } },
        }),
  • ¶

    Add a Region layer with vertical regions. Vertical regions don’t define y or y2. These regions are draggable and resizable.

            new c3.Plot.Layer.Region<{x:number, x2: number, color: string}>({
            data: [
                { x: 20, x2: 30, color: 'red' },
                { x: 65, x2: 85, color: 'green' },
            ],
            x: (d) => d.x,
            x2: (d) => d.x2,

            draggable: true,
            resizable: true,

            rect_options: {
                styles: {
                    fill: (d) => d.color,
                    opacity: 0.5,
                },
            },
  • ¶

    It is important to update the original data element based on the new location/size. This must be done manually as there is no automatic inverse of the user-provided accessors for setting the opaque data type.

                handlers: {
                dragend: (v, d) => { d.x = v.x; d.x2 = v.x2; },
            }
        }),
  • ¶

    Add a Region layer with a rectangular region.

            new c3.Plot.Layer.Region<{x:number, x2: number, y: number, y2: number, color: string}>({
            data: [
                { x: 45, x2: 55, y: .4, y2: .6, color: 'blue' },
            ],
            x: (d) => d.x,
            x2: (d) => d.x2,
            y: (d) => d.y,
            y2: (d) => d.y2,

            draggable: true,
            resizable: true,

            rect_options: {
                styles: {
                    fill: (d) => d.color,
                    opacity: 0.5,
                },
            },
  • ¶

    It is important to update the original data element based on the new location/size. This must be done manually as there is no automatic inverse of the user-provided accessors for setting the opaque data type.

                handlers: {
                dragend: (v, d) => { d.x=v.x; d.x2=v.x2; d.y=v.y; d.y2=v.y2; },
            }
        }),

    ],
}).render();
  • ¶

    Resize the chart to fit the window

    window.onresize = function () { plot.resize(); }
  • ¶

    Forms to modify legend options

  • ¶

    // Invert the layers in the legend $(‘#invert_layers’).on(‘change’, function () { (<c3.Legend.PlotLegend>plot_legend).invert_layers = this.checked; plot_legend.redraw(); });