- Introduction
- Installation
- Getting Started
- Global Config
- Charts
- Clustered Vertical Bar Chart
- Clustered Horizontal Bar Chart
- Stacked Vertical Bar Chart
- Stacked Horizontal Bar Chart
- Line Chart
- Combo Chart
- Pie Chart
- Doughnut Chart
- Gauge Chart
- Scatter Plot Chart
- InfoGraphics Chart
- KPI Chart
- Bullet Chart
- BoxPlot Chart
- Sankey Chart
- Table
- PivotTable
- Map
- TreeMap
- HeatMap
Data Visualization can be understood as a graphical presentation of data to uncover the underlying information that it holds and allow the users to identify the patterns present in it. By delivering information in a vibrant and interactive structure it facilitates users to make quick decisions based upon their roles. What makes a data visualization even more powerful is its ability to process data in real time allowing immediacy in making a decision. On contrary to batch or event-driven visualization real-time analytics is the state of the art tool for any individual or organisation who must take tactical or operational decisions on the fly.
With support for more than 20 different basic and advanced visualizations, the users can view the data from various dimensions whether it be for distribution analytics, relationship analytics or comparison analytics. The Flair BI visualization library is completely open source, allowing any data enthusiasts to use it to create their own custom Business Intelligence tool or simply use the visualizations in their personal projects.
Flair-Visualizations can be installed via npm or bower. It is recommended to get Flair-Visualizations this way.
npm install flair-visualizations
bower install flair-visualizations
Property Name | Config Property Name | Description | Default Value | Possible Values |
---|---|---|---|---|
Show X Axis | showXaxis | Boolean that says if x axis should be shown | TRUE | True |
Show Y Axis | showYaxis | Boolean that says if y axis should be shown | TRUE | True |
X Axis Colour | xAxisColor | Colour of X axis | #676a6c | |
Y Axis Colour | yAxisColor | Colour of Y axis | #676a6c | |
Show X Axis Label | showXaxisLabel | Boolean that says if x axis label should be shown | TRUE | True |
Show Y Axis Label | showYaxisLabel | Boolean that says if y axis label should be shown | TRUE | True |
Show Legend | showLegend | Boolean that says if legend should be shown | TRUE | True |
Legend position | legendPosition | Legend position with sides | Top | Top |
Show Grid | showGrid | Boolean to Show Grid or not | TRUE | True |
Stacked | stacked | Boolean that says if chart is stacked | TRUE | True |
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9 Line Chart Point type pointType Type of points Circle Circle,Cross,CrossRot,Dash,Line,Rect,RectRounded,RectRot,Star,Triangle Line Type lineType Types of line charts Line Area/Line
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 4 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9 Line Chart Point type pointType Type of points Circle Circle,Cross,CrossRot,Dash,Line,Rect,RectRounded,RectRot,Star,Triangle Line Type lineType Types of line charts Line Area/Line Combo chart type comboChartType line or bar Bar Bar/Line
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Show value as valueAs show labels as option in piece lable Label Label/Percentage/Value Value as Arc valueAsArc Boolean that says value on the segment should be in arc or not TRUE true/false Value position valuePosition Position of value outside or inside pie segment Border Border/Outside
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 1 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Show value as valueAs show labels as option in piece lable Label Label/Percentage/Value Value as Arc valueAsArc Boolean that says value on the segment should be in arc or not TRUE true/false Value position valuePosition Position of value outside or inside pie segment Border Border/Outside -
Property Name Config Property Name Description Default Value Possible Values Display name dimensionDisplayName A Display name for Dimension Displayname Display name measureDisplayName A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Text colour fontColor The text colour #617c8c Font size fontSize Size of fonts 9
-
Type | Required | Optional |
---|---|---|
Dimensions | 0 | 0 |
Measures | 2 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Gauge Type gaugeType Type of gauges Half Circle Half Circle/Radial -
Property Name Config Property Name Description Default Value Possible Values Value on Points targetShowValues Show value on points for Target Measure FALSE True Display name targetDisplayName A Display name for Target Measure Displayname Font style targetFontStyle Style of fonts for Target Measure Normal Normal/Italique/Oblique Font weight targetFontWeight Weight of fonts for Target Measure Normal Normal/Bold/100-900 Number format targetNumberFormat Possible number formats for Target Measure Actual K,M,B,Actual Text colour targetTextColor The text colour for Target Measure #617c8c Display colour targetDisplayColor An display colour for Target Measure null Value on Points showValues Show value on points FALSE True Display name displayName A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Enable Gradient Color isGradient Enable Gradient Color for Source Measure FALSE True
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 9 |
Measures | 1 | 9 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayNameForDimension A Display name for Dimension Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour textColorForDimension The text colour for Dimension #617c8c Font size fontSizeForDimension Size of fonts for Dimension 9 Cell colour cellColorForDimension Cell colour for table cells for Dimension rgba(255, 255, 255, 1) Text colour expression textColorExpressionForDimension The text colour expression for Dimension null Text alignment textAlignmentForDimension Alignment of text for Dimension Center Center/Left/Right -
Property Name Config Property Name Description Default Value Possible Values Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyleForMeasure Style of fonts for Measure Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Measure Normal Normal/Bold/100-900 Text colour textColorForMeasure The text colour for Measure #617c8c Font size fontSizeForMeasure Size of fonts for Measure 9 Cell colour cellColorForMeasure Cell colour for table cells for Measure rgba(255, 255, 255, 1) Text colour expression textColorExpressionForMeasure The text colour expression for Measure null Cell colour expression cellColorExpressionForMeasure Expression to customize cell colour of table cells null Icon name iconNameForMeasure An icon name for Measure null Icon Expression iconExpressionForMeasure An icon expression for Measure null Text alignment textAlignmentForMeasure Alignment of text for Measure Center Center/Left/Right Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Number format numberFormatForMeasure Possible number formats for Measure Actual K,M,B,Actual
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 4 |
Measures | 1 | 9 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayNameForDimension A Display name for Dimension Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour textColorForDimension The text colour for Dimension #617c8c Font size fontSizeForDimension Size of fonts for Dimension 9 Cell colour cellColorForDimension Cell colour for table cells for Dimension rgba(255, 255, 255, 1) Text colour expression textColorExpressionForDimension The text colour expression for Dimension null Text alignment textAlignmentForDimension Alignment of text for Dimension Center Center/Left/Right Pivot isPivoted Pivot the dimension FALSE true/false -
Property Name Config Property Name Description Default Value Possible Values Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyleForMeasure Style of fonts for Measure Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Measure Normal Normal/Bold/100-900 Text colour textColorForMeasure The text colour for Measure #617c8c Font size fontSizeForMeasure Size of fonts for Measure 9 Cell colour cellColorForMeasure Cell colour for table cells for Measure rgba(255, 255, 255, 1) Text colour expression textColorExpressionForMeasure The text colour expression for Measure null Cell colour expression cellColorExpressionForMeasure Expression to customize cell colour of table cells null Icon name iconNameForMeasure An icon name for Measure null Icon Expression iconExpressionForMeasure An icon expression for Measure null Text alignment textAlignmentForMeasure Alignment of text for Measure Center Center/Left/Right Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Number format numberFormatForMeasure Possible number formats for Measure Actual K,M,B,Actual Icon Font weight iconFontWeight Weight of icon fonts Normal Normal/Bold/100-900 Icon colour iconColor An Icon colour null
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 1 |
Measures | 1 | 1 |
-
-
Config Property Name Description Default Value Possible Values numberFormat Possible number formats Actual K,M,B,Actual displayColor An display colour null -
Property Name Config Property Name Description Default Value Possible Values Border colour borderColor An border colour null
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 1 |
Measures | 1 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Show Labels showLabelForDimension Boolean to show labels TRUE true/false Colour of labels labelColorForDimension Label colours null null Display colour displayColor An display colour null null Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSizeForDimension Size of fonts for Dimension 9 -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE true/false Font size fontSizeForMes Size of fonts 9 Font style fontStyleForMes Style of fonts Normal Normal/Italique/Oblique Font weight fontWeightForMes Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour valueTextColour The text colour #617c8c Color Pattern colorPattern Color pattern to vizualizations null Single/Gradient/Unique
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 1 |
Measures | 1 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Colour of labels dimLabelColor Label colours null null Display name displayName A Display name Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSizeForDimension Size of fonts for Dimension 9 -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE True/False Number format numberFormat Possible number formats Actual K,M,B,Actual Show Icon showIcon Boolean to show icons TRUE true/false Color Coding colourCoding Conditional coloring null Display name displayNameForMeasure A Display name for Dimension Displayname Font style fontStyleForMeasure Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour valueTextColour The text colour for Dimension #617c8c Font size fontSizeForMeasure Size of fonts for Dimension 9 Alignment valuePosition an alignment Left Center/Left/Right Icon name iconNameForMeasure An icon name for Measure null Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Icon Font weight iconFontWeight Weight of icon fonts Normal Normal/Bold/100-900 Icon colour iconColor An Icon colour null
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 5 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Number format numberFormat Possible number formats Actual K,M,B,Actual Show Labels showLabel Boolean to show labels TRUE true/false Colour of labels labelColor Label colours null null -
Property Name Config Property Name Description Default Value Possible Values Display colour displayColor An display colour null
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 2 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Orientation orientation Orientation of Bullet Chart Horizontal Horizontal/Vertical Segments segments No of Segments 1 1 to 5 Segment Color Coding segmentInfo Segment Color Coding null -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE true/false Font size fontSizeForMes Size of fonts 9 Font style fontStyleForMes Style of fonts Normal Normal/Italique/Oblique Font weight fontWeightForMes Weight of fonts Normal Normal/Bold/100-900 -
Property Name Config Property Name Description Default Value Possible Values Target colour targetColor Target colour #676a6c null Display colour displayColor An display colour null Number format measureNumberFormat Possible number formats Actual K,M,B,Actual Number format targetNumberFormat Possible number formats Actual K,M,B,Actual
-
Type | Required | Optional |
---|---|---|
Dimensions | 2 | 3 |
Measures | 1 | 0 |
-
-
Property Name Config Property Name Description Default Value Possible Values Font style fontStyle Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSize Size of fonts for Dimension 9 Text colour textColor The text colour for Target Measure #617c8c Value on Points showValues Show value on points FALSE True/False -
Property Name Config Property Name Description Default Value Possible Values Number format numberFormat Possible number formats Actual K,M,B,Actual Color Pattern colorPattern Color pattern to vizualizations null Single/Gradient/Unique Display colour displayColor An display colour null Border colour borderColor An border colour null
-
Type | Required | Optional |
---|---|---|
Dimensions | 1 | 0 |
Measures | 2 | 1 |
-
-
Property Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname -
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
-