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.