Class SvgChartConfig

SvgChart config class.

Hierarchy

  • SvgChartConfig

Constructors

constructor

Properties

ltr series title chartType onXAxisLabelGroupSelect padding paddingDefault legendWidth focusedValueShow onFocusedValueDisplay focusedCSSValueFill focusedCSSValueColor focusedCSSValuePadding drawOnConfig drawOnData fade backgroundColor fontFamily titleFontSize titleColor titleHorizontalPosition titleVerticalPosition maxValue minValue axisTitleFontSize axisLabelFontSize xAxisTitle xAxisTitleBottom xAxisGridLineWidth xAxisGridLineColor xAxisGridLineDashArray xAxisLabelColor xAxisTitleColor xAxisGrid xAxisGridPadding xAxisLabels xAxisGridColumns xAxisGridColumnsSelectable xAxisGridSelectedColumnOpacity xAxisGridColumnsSelectableColor textAnchorXAxisLabels xAxisLabelTop xAxisLabelRotation xAxisStep xAxisLabelStep yAxisTitle yAxisTitleStart yAxisGridLineWidth yAxisGridLineColor yAxisGridLineDashArray yAxisLabelColor yAxisTitleColor yAxisStep yAxisLabelStep yAxisGrid yAxisLabels yAxisGridPadding legendFontSize legendColor legendCircle legend legendSelect legendPosition legendBottom legendTop lineWidth pointRadius connectNullValues lineCurved lineChartFilled points barFillOpacity barSpacing barStrokeWidth barStacked pieFillOpacity donutWidth pieStroke pieStrokeWidth donutStroke donutStrokeWidth radarStrokeWidth radarFillOpacity bubbleMaxZValue bubbleFillOpacity bubbleStrokeWidth bubbleMaxRadius

Methods

getDirection

Constructors

constructor

  • Creates a new SvgChartConfig instance with properties from parameter. Note: config parameter object is referenced.

    Parameters

    • Optional props: object

      Object with all non-default properties.

    Returns SvgChartConfig

Properties

ltr

ltr: boolean = true

Whether language direction is ltr.

series

series: ChartConfigSerie[] = null

Series array.

title

title: string = null

Title of chart.

chartType

chartType: ChartType = null

Chart type.

onXAxisLabelGroupSelect

onXAxisLabelGroupSelect: XAxisColumnSelectedCallback = null

Callback when x axis label is selected. Parameters are SvgChart and x axis column index.

padding

padding: {
    start: number;
    end: number;
    top: number;
    bottom: number;
    left: number;
    right: number;
} = ...

Padding object.

Type declaration

  • start: number
  • end: number
  • top: number
  • bottom: number
  • left: number

    Left will be set by code, depends on direction.

  • right: number

    Right will be set by code, depends on direction.

paddingDefault

paddingDefault: number = 20

Default padding for space between elements.

legendWidth

legendWidth: number = 10

Width of legend squares or circles.

focusedValueShow

focusedValueShow: boolean = true

Whether the value box should be displayed when an element has focus.

onFocusedValueDisplay

onFocusedValueDisplay: FocusedValueCallback = null

Callback that returns a custom string to display when an item receives focus.

focusedCSSValueFill

focusedCSSValueFill: string = 'black'

Fill color of focused value box.

focusedCSSValueColor

focusedCSSValueColor: string = 'white'

Font color of focused value box.

focusedCSSValuePadding

focusedCSSValuePadding: string = '6px'

Padding of focused value box.

drawOnConfig

drawOnConfig: DrawCallback = null

Draw function to execute in the config phase. It receives a SvgChart and HTMLElement parameter.

Example

function(svgChart, groupNode) {
    groupNode.appendChild(svgChart.el('rect', {
        x: 10,
        y: 10
    }));
}

drawOnData

drawOnData: DrawCallback = null

Draw function to execute in the chart phase. It receives a SvgChart and HTMLElement parameter.

Example

function(svgChart, groupNode) {
    groupNode.appendChild(svgChart.el('rect', {
        x: 10,
        y: 10
    }));
}

fade

fade: boolean = true

transition - Whether the chart elements should be faded in or nor.

backgroundColor

backgroundColor: string = 'white'

Background color of the SVG element.

fontFamily

fontFamily: string = 'sans-serif'

Font fanily for all text elements.

titleFontSize

titleFontSize: string | number = 'normal'

Fontsize for the title.

titleColor

titleColor: string = 'black'

Font color of title.

titleHorizontalPosition

titleHorizontalPosition: ChartPosition = ChartPosition.Center

Horizontal position of title. Can be one of: center, start, end.

titleVerticalPosition

titleVerticalPosition: ChartPosition = ChartPosition.Top

Vertical position of title. Can be one of: top, bottom, center.

maxValue

maxValue: number = null

Maximum value. Required for charts with Y-axes.

minValue

minValue: number = null

Minumum value of Y axis. Required for charts with Y-axes.

axisTitleFontSize

axisTitleFontSize: string = 'smaller'

Font size of axes titles.

axisLabelFontSize

axisLabelFontSize: string = 'small'

Font size of axes labels.

xAxisTitle

xAxisTitle: string = null

X axis title.

xAxisTitleBottom

xAxisTitleBottom: number = null

If this is a number X, than the x axis title will be positioned X pixels from the bottom. If this is null, then the title will be positioned paddingDefault pixesl from the bottom.

xAxisGridLineWidth

xAxisGridLineWidth: number = 1

Line width of the x axis grid.

xAxisGridLineColor

xAxisGridLineColor: string = '#C0C0C0'

Color of x axis grid lines.

xAxisGridLineDashArray

xAxisGridLineDashArray: string = '1 1'

Stroke dash array value for the x axis grid lines. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray.

xAxisLabelColor

xAxisLabelColor: string = '#A0A0A0'

Font color of xaxis labels.

xAxisTitleColor

xAxisTitleColor: string = '#A0A0A0'

Font color of x axis title.

xAxisGrid

xAxisGrid: boolean = true

Whether the xaxis grid should be displayed.

xAxisGridPadding

xAxisGridPadding: number = 0

Outside padding for x axis grid.

xAxisLabels

xAxisLabels: boolean = true

Whether x axis labels should be displayed.

xAxisGridColumns

xAxisGridColumns: boolean = false

Whether the x axis labels should be below (false) or between (true) the x axis grid lines. For bar charts this will always be set to true.

xAxisGridColumnsSelectable

xAxisGridColumnsSelectable: boolean = false

Whether xAxisGridColumns should be selectable. If this is true, the x axis labels can be clicked and selected.

xAxisGridSelectedColumnOpacity

xAxisGridSelectedColumnOpacity: number = 0.2

Opacity value for the selected xAxisGridColumn.

xAxisGridColumnsSelectableColor

xAxisGridColumnsSelectableColor: string = 'black'

Background color for a selected xAxisGridColumn.

textAnchorXAxisLabels

textAnchorXAxisLabels: string = 'middle'

The text anchor value for x axis labels. For example if you want vertical labels that should be aligned to the x axis, you can set this to 'start'. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor.

xAxisLabelTop

xAxisLabelTop: number = 10

Number of pixels that the x axsis labels will be positioned from the bottom x axis grid line.

xAxisLabelRotation

xAxisLabelRotation: number = 0

Degrees for the x axis labels.

xAxisStep

xAxisStep: number = 1

Steps between x axis grid lines.

xAxisLabelStep

xAxisLabelStep: number = 1

Steps between x axis labels.

yAxisTitle

yAxisTitle: string = null

yAxisTitleStart

yAxisTitleStart: number = null

Number of pixels the y axis labels should be positioned from the start. If this is null, this will be defaultPadding pixels.

yAxisGridLineWidth

yAxisGridLineWidth: number = 1

Line width of the y axis grid.

yAxisGridLineColor

yAxisGridLineColor: string = '#C0C0C0'

Color of y axis grid lines.

yAxisGridLineDashArray

yAxisGridLineDashArray: string = '1 1'

Stroke dash array value for the y axis grid lines. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray.

yAxisLabelColor

yAxisLabelColor: string = '#A0A0A0'

Font color of y axis labels.

yAxisTitleColor

yAxisTitleColor: string = '#A0A0A0'

Font color of y axis title.

yAxisStep

yAxisStep: number = 10

Steps between y axis grid lines.

yAxisLabelStep

yAxisLabelStep: number = 10

Steps between y axis labels.

yAxisGrid

yAxisGrid: boolean = true

Whether the y axis grid should be displayed.

yAxisLabels

yAxisLabels: boolean = true

Whether y axis labels should be displayed.

yAxisGridPadding

yAxisGridPadding: number = 0

Outside padding for y axis grid.

legendFontSize

legendFontSize: string = 'smaller'

Font size for legend labels.

legendColor

legendColor: string = 'black'

Font color of legend labels.

legendCircle

legendCircle: boolean = false

Whether legends should be squares (false) or circles (true)

legend

legend: boolean = true

legendSelect

legendSelect: boolean = true

Whether clicking on a legend hides and shows a the serie.

legendPosition

legendPosition: ChartPosition = ChartPosition.Top

Position of legend. Possible values: bottom, top, end.

legendBottom

legendBottom: number = null

If not null, number of pixels the legend should be positioned from the bottom. Otherwise a default number of pixels will be used.

legendTop

legendTop: number = null

lineWidth

lineWidth: number = 2

Width of line for line charts.

pointRadius

pointRadius: number = 2

Radius of line points for line charts.

connectNullValues

connectNullValues: boolean = false

Whether null values should be connected or not.

lineCurved

lineCurved: boolean = true

Whether lines should be curved or not.

lineChartFilled

lineChartFilled: boolean = false

Whether line charts should be filled or not.

points

points: boolean = true

Whether the lines should display points or not.

barFillOpacity

barFillOpacity: number = 0.5

Opacity of bars.

barSpacing

barSpacing: number = 4

Spacing in pixels between bars.

barStrokeWidth

barStrokeWidth: number = 1

Width of bar border.

barStacked

barStacked: boolean = false

Whether bars should be stacked.

pieFillOpacity

pieFillOpacity: number = 0.6

Opacity of pie and donut charts.

donutWidth

donutWidth: number = null

With of donuts. Of not given a default value is used.

pieStroke

pieStroke: string = 'white'

Stroke color for pie charts.

pieStrokeWidth

pieStrokeWidth: number = 2

Width of stroke for pie charts. If this is 0, no stroke is painted.

donutStroke

donutStroke: string = 'white'

Stroke color for donut charts.

donutStrokeWidth

donutStrokeWidth: number = 2

Width of stroke for donut charts. If this is 0, no stroke is painted.

radarStrokeWidth

radarStrokeWidth: number = 2

radarFillOpacity

radarFillOpacity: number = 0.3

bubbleMaxZValue

bubbleMaxZValue: number = 100

bubbleFillOpacity

bubbleFillOpacity: number = 0.5

bubbleStrokeWidth

bubbleStrokeWidth: number = 1

bubbleMaxRadius

bubbleMaxRadius: number = null

Methods

Static getDirection

  • Get direction string to use for dom direction attribute.

    Parameters

    Returns string

    Attribute value.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc