plot_area_example.ts

Jump To … +

butterfly_example.ts flamechart_sunburst_example.ts legend_example.ts pie_example.ts plot_area_example.ts plot_zoom_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

plot_area_example.ts
¶

C3 Area Plot A simple static area graph.
¶

Generate the Data
¶

Generate the data to visualize. The data to visualize has to be an array. This example demonstrates that it can be an array of anything. Accessor functions are used to pull out various aspects of the data, such as x and y values.
¶

This creates an array of objects. Each element in the array in an object with an x_value and a y_value. The x_value‘s go from 0 to 10 and the y_value‘s are the x value cubed.
```
var cubed_data = [];
for (let i = 0; i <= 10; i++) cubed_data.push({ x_value: i, y_value: i * i * i });
```
¶

Create a C3 Plot
¶

Create a c3.Plot chart and attach it to a specific div anchor in the DOM. Assign it a specific height and a relative width and bind it to the generated cubed_data. The height and width are optional and could be setup using CSS, JQuery, or any other DOM manipulation instead.
```
var area_example = new c3.Plot({
    anchor: '#area_example_plot',
    height: 300,
    width: "75%",
    data: cubed_data,
```
¶

Setup the horizontal and vertical scales for the plot.Scales are based on D3 scales. When preparing scales for C3 setup the domain based on your user units. C3 will take care of the range, which will represent pixels.
```
    h: d3.scale.linear().domain([0, 10]),      // horizontal scale
    v: d3.scale.linear().domain([0, 1000]),    // vertical scale
```
¶

Accessor functions which describe how to get x and y values from the user data.
```
    x: (d) => d.x_value,
    y: (d) => d.y_value,
```
¶

Reserve margins for the top and right of the plot.This is done to allow the axis labels to fully display. This is needed because most browsers currently don’t support overflow: visible for svg elements.
```
    margins: {
        top: 10,
        right: 20,
    },
```
¶

Setup c3.Axis objects. C3 plots may have up to 4 axes attached for the top, bottom, left, and right of plots. Axes may also be created independent of plots for layout flexibility which is covered in another example. These axes also enable grid lines in the plot. They are dotted lines because of styles setup in the examples.less stylesheet.
```
    axes: [
        new c3.Axis.X({
            tick_size: 10,
            grid: true,
        }),
        new c3.Axis.Y({
            grid: true,
        }),
    ],
```
¶

Plots do not render any data by themselves. Instead, they host a set of layers which are superimposed on the plot to visualize the same or different data sets. There are different types of layers such as line graphs, scatter plots, swim - lane segments, etc. This example just uses a very simple area plot. The interpolate: 'basis' causes the rendered path to use a smooth curve based on the data points instead of straight linear sections.
```
    layers: [
        new c3.Plot.Layer.Area({
            interpolate: 'basis', // Make a smooth curve using "basis" interpolation
        }),
    ],
});
```

Resize the chart to fit the window

window.onresize = () => {
    area_example.resize();
}

¶

Render the chart!
```
area_example.render();
```