@reside-ic/skadi-chart 1.1.5-alpha → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -123,11 +123,15 @@ new Chart()
|
|
|
123
123
|
|
|
124
124
|
## Base chart class
|
|
125
125
|
|
|
126
|
-
All charts start with the `Chart` class that takes in `ChartOptions
|
|
127
|
-
in ms
|
|
126
|
+
All charts start with the `Chart` class that takes in `ChartOptions`, e.g. `animationDuration`
|
|
127
|
+
in ms, `logScale`, or tick configuration options. See [here](./src/Chart.ts) for source code.
|
|
128
|
+
|
|
129
|
+
Examples:
|
|
128
130
|
|
|
129
131
|
```ts
|
|
130
|
-
const chart = new Chart(
|
|
132
|
+
const chart = new Chart()
|
|
133
|
+
const chartWithLongerAnimation = new Chart({ animationDuration: 500 });
|
|
134
|
+
const chartWithFewXAxisTicks = new Chart({ tickConfig: { numerical: { x: { size: 1 } } } });
|
|
131
135
|
```
|
|
132
136
|
|
|
133
137
|
## Layers
|
|
@@ -196,11 +200,12 @@ Each layer itself defines how it zooms so this will let the user zoom on your gr
|
|
|
196
200
|
* `addTooltips` adds a [TooltipLayer](./src/layers/TooltipsLayer.ts) which adds tooltips
|
|
197
201
|
to the chart. For traces and points this means the tooltip will appear pointing to the
|
|
198
202
|
closest point in the graph to the cursor (once it is within a threshold). You must provide
|
|
199
|
-
a callback returning HTML to render the tooltip. You may optionally
|
|
200
|
-
|
|
203
|
+
a callback returning HTML to render the tooltip. You may optionally configure the radius (px)
|
|
204
|
+
within which a point triggers the tooltip to be displayed. You may also optionally specify an axis;
|
|
205
|
+
if you do, then the 'closest point' will be determined by the distance from the cursor on that axis.
|
|
201
206
|
For example, you may want to show the tooltip for the nearest x value regardless of y distance.
|
|
202
207
|
```ts
|
|
203
|
-
chart.addTooltips(tooltipHtmlCallback, "x");
|
|
208
|
+
chart.addTooltips(tooltipHtmlCallback, 25, "x");
|
|
204
209
|
```
|
|
205
210
|
* `makeResponsive` is not really a layer but will make your graph responsive (redraw on change
|
|
206
211
|
to container bounds and changes to window size).
|