Skip to content
chaosmail edited this page Jan 3, 2016 · 5 revisions

No build files when installed via bower

n3-line-chart v1 was previously (and still is) distributed via the package manager bower. However, Bower has some restrictions for developers that makes it uncomfortable to work with (in comparison to npm); that's why we moved to npm for distributing n3-line-chart. That's the place where you can also find our latest builds.

Simply run npm install n3-charts to install the latest version of n3-line-chart.

Using n3-line-charts in a grid with Twitter Bootstrap

The height attribute needs to be set manually to display and resize the chart properly. Here is an example.

<div class="row">
    <div class="col-md-3">
        <linechart data="data" options="options" height="300"></linechart>
    </div>
</div>

Ticks are overlapping on the x-axis

The number of ticks is estimated by the number of points that are displayed; therefore, it can happen that tick values (especially dates and times) overlap. You can solve this by

  • creating a bigger margin on the bottom and rotate the ticks by 30 degree with ticksRotate. Here is an example.
  • using less tick values by defining the values that should be displayed in the ticks option
  • using less tick values by defining the ticksInterval. Tick Intervals can be used like this.