vizkit.js is an opinionated little charting library built on top of the amazing and wonderful d3.js visualization framework.
.yaxis({key: value}) / .xaxis({key: value})Configuration method used to specify properties of the chart axis.
| Key Name | Description | Allowed Value |
|---|---|---|
| tickFormat | A number format function suitable for displaying a tick value. | d3 format specifer |
| ticks | The number of ticks this axis should have. | integer |
| scale | Specifies the d3.js scale to use with this axis. see: scales. | 'linear', 'ordinal', or 'time' |
| gridLine | Specifies whether the chart ticks should extend vertically to the axis. | true or false |
.line({key: value})Configuration method used to specify properties of the chart lines.
| Key Name | Description | Allowed Value |
|---|---|---|
| interpolate | Sets the interpolation mode of the chart. | d3 interpolation modes |
| symbol | symbol used for points on the chart. | d3 symbol object |
.area()Configuration method used to specify whether area below lines should be filled.
| Description | Allowed Value |
|---|---|
| area charts are just line charts with the area below them filled in. To add an ".area-x" class which can be filled for each line, simply provide a true value to this configuration method. area chart example. | true or false |
.legend({key: value})Configuration method used to specify properties of the chart legend.
| Key Name | Description | Allowed Value |
|---|---|---|
| addMouseoverClasses | Specifies whether css classes should be added to the chart when hovering over a legend symbol. If true, class names are: line-mo, key-mo, line-nomo, key-nomo | true or false |
| symbol | symbol used for each line on the legend. | d3 symbol object |
.tooltip({key: value})Configuration method used to specify properties of chart value tooltips. If true, a div with the class name .vizkit-tooltip will be available for styling.
| Key Name | Description | Allowed Value |
|---|---|---|
| content | A template string to display in the tooltip. Variables to display in the template between brackets are key, xValue, and yValue. | string template like: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>" |