`

    // code samples using Pug

`

### A Single Dataset

The most basic implementation.

`

    .js-line-chart(
      data-chart-json="[[1,2,4,8]]"
    )

`

### Automatic Height

Automatically adjusts height based on values. Doesn't matter if largest value is first, last, or in the middle.

`

    .js-line-chart(
      data-chart-json="[[1,2,8,4]]"
    )

`

Aspect ratio can be adjusted at the beginning of the JS. Eventually this will be a passable option.

### Dynamic X Postion

Dynamically calculates positions based on number of values in dataset so you don't have to specify x-axis values.

`

    .js-line-chart(
      data-chart-json="[[1,2,4,8,16]]"
    )

`
`

    .js-line-chart(
      data-chart-json="[[1,2,4,8,16,32,64]]"
    )

`

### Accepts multiple datasets

Colors are handled by CSS styles.

`

    .js-line-chart(
      data-chart-json="[[1,2,4,8],[2,4,8,16]]"
    )

`
`

    .js-line-chart(
      data-chart-json="[[1,2,4,8,16],[2,4,8,16,32],[3,6,12,24,48]]"
    )

`

### Uneven Horizontal Plotting

Accepts another data attribute to define explicit x-axis values for your data points.

`

    .js-line-chart(
      data-chart-json="[[1,2,4,16]]",
      data-chart-coords-x="[1,3,5,10]"
    )

`
`

    .js-line-chart(
      data-chart-json="[[1,2,8,4]]",
      data-chart-coords-x="[1,3,5,10]"
    )

`

One set of custom horizontal values applies to all data sets.

`

    .js-line-chart(
      data-chart-json="[[1,2,8,4],[2,6,5,16],[3,9,24,6]]",
      data-chart-coords-x="[1,3,5,10]"
    )

`