Options
Categories
A. Show
Show or hide elements from the view.
| Option | Default | Examples | Description | |
|---|---|---|---|---|
| A.1. | showTitle | false | A, B | Show or hide title on the front of the diagram. |
| A.2. | showLegend | false | A, B, C | Show or hide legend. Recommended for stacked diagrams. |
| A.3. | showAverage | true | A, B, C | Calculate and show average line |
| A.4. | showRangeYLog | false | A, B | Calculate and show range y in a log scale. |
| A.5. | showDataAsCircle | false | A, B, C | Show data as circles instead of rectangles. Only for not stacked diagram available. |
B. View
Settings around the diagram as a whole.
| Option | Default | Examples | Description | |
|---|---|---|---|---|
| B.1. | viewTitle | "Statosio Demo" | A | Set title content. |
| B.2. | viewDomId | "d3_statosio" | A | Set id from the <div> Element which holds the d3 content inside. |
| B.3. | viewMarginTop | 20 | A, B | Set margin top |
| B.4. | viewMarginRight | 40 | A, B | Set margin right |
| B.5. | viewMarginBottom | 100 | A, B | Set margin bottom |
| B.6. | viewMarginLeft | 60 | A, B | Set margin left |
| B.7. | viewWidthOuter | 600 | A, B | Set width of the "canvas" including margin, titles etc. |
| B.8. | viewHeightOuter | 300 | A, B | Set height of the "canvas" including margin. |
| B.9. | viewTranslateMultiplicator | 1.5 | A, B | Between title, legend and diagram are spaces. These spaces gets calculated through this multiplicator. |
C. Data
Rearrange Data by sorting or set selectors.
| Option | Default | Examples | Description | |
|---|---|---|---|---|
| C.1. | dataXKey | "" | Expect a "key" name from the dataset to arrange the x range. | |
| C.2. | dataXSelectors | [] | A, B | Expect one or more names which are included in the x range. |
| C.3. | dataXTextLength | 25 | A, B | This value counts the length of the x range names an cut of the rest. |
| C.4. | dataXTextPlaceholder | "…" | A, B | Set an suffix behind a string. As a signal to the viewer, that the text was cut of. |
| C.5. | dataYKeys | [] | Expect "keys" from the dataset to arrange the y range. If you use one key the internal state is "bar". if you use multiple the internal is "stacked" | |
| C.6. | dataYTicks | 5 | A, B | Ticks in d3 land means "steps". Here you can set the steps from the grid and y range. |
| C.7. | dataSortCurrent | "none" | A, B | Set the general route for sorting. You can choose between "none", "values", "names". |
| C.8. | dataSortByValues | "decending" | A, B, C | Here you can set type of sorting. You can choose between "ascending" and "decending" |
| C.9. | dataSortByNames | "ascending" | A, B | Here you can set type of sorting. You can choose between "ascending" and "decending" |
| C.10. | dataSortSelection | "none" | A, B, C | Change position of your selection. You can choose between "start", "end" and "none" |
| C.11. | dataLegendTextSeparater | "_" | A | This tweak split your keys with the separater and capitalize every word and insert a space in between. |
D. Style
Set style settings from specific element.
| Option | Default | Examples | Description | |
|---|---|---|---|---|
| D.1. | styleColorAverage | "#000000" | A, B | Set color of the average line. |
| D.2. | styleColorCanvasBackground | "white" | A, B | Set background color. |
| D.3. | styleColorFont | "#000000" | A, B | Set default font color. Excluding non-selection content. |
| D.4. | styleColorLegends | ["#5186EC", "#D95040", "#F2BD42"] | A, B | Set legend color palettes. Expect an array of "hex" values or "html" color-names. |
| D.5. | styleColorGridline | "#E5E5E5" | A, B | Set the gridline color. Use "hex" value or "html" color-names. |
| D.6. | styleColorSelectorsChart | ["#EE752F", "#5186EC"] | A, B | Colorize the chart of the selection. Use "hex" values or "html" color-names. |
| D.7. | styleColorSelectorsText | ["#000000", "#000000"] | A, B | Colorize the font of the selection. Use "hex" values or "html" color-names. |
| D.8. | styleFontSizeText | 10 | A, B | Set default font size, including selection. |
| D.9. | styleFontSizeTitle | 18 | A, B | Set font size of title |
| D.10. | styleFontFamily | "arial" | A, B | Set default font family |
| D.11. | styleFontFormatSelectors | ["bold", "normal"] | A, B | Set format of content use "Html" Syntax ("bold", "underline", "normal" etc.). |
| D.12. | styleStrokeAverage | 2 | A, B | Set stroke weight of average line. |
| D.13. | styleStrokeGridline | 2 | A, B | Set stroke weight of gridline. |
| D.14. | styleLegendRectSizeFull | 16 | A, B | Set rectangle size of legend item. |
| D.15. | styleOtherCircleChartRadius | 4 | A, B | Set radius of circle. |
| D.16. | styleOtherRangeXTextRotation | -45 | A, B | Set text rotation of the x axis. |