Skip to content

Latest commit

 

History

History
511 lines (445 loc) · 33.1 KB

docs.md

File metadata and controls

511 lines (445 loc) · 33.1 KB
Raw

Documentation

For complete properties list, please check files under lib/*

Description (prop for all charts)

Prop Type Default Note
text string
textColor number
textSize number
positionX number
positionY number

Legend (prop for all charts)

Prop Type Default Note
enabled bool
text string
textColor number
textSize number
fontFamily string
fontStyle number
wordWrapEnabled bool
maxSizePercent number
horizontalAlignment one of 'LEFT', 'CENTER', 'RIGHT'
verticalAlignment one of 'TOP', 'CENTER', 'BOTTOM'
orientation one of 'HORIZONTAL', 'VERTICAL'
drawInside bool
direction one of LEFT_TO_RIGHT', 'RIGHT_TO_LEFT
form string
formSize number
xEntrySpace bool
yEntrySpace number
formToTextSpace number
custom {
colors: [number],
labels: [string]
}

Common Props for xAxis and yAxis

Prop Type Default Note
enabled bool
drawLabels bool
drawAxisLine bool
drawGridLines bool
textColor number
textSize number
fontFamily string
fontStyle number
gridColor bool
gridLineWidth bool
axisLineColor bool
axisLineWidth bool
gridDashedLine {
lineLength: number,
spaceLength: number,
phase: number
}
limitLines array : [{ limit: number, label: string, lineColor: number, lineWidth: number, valueTextColor: number, valueFont: number, fontFamily: string, fontStyle: string, fontWeight: string, labelPosition: string, lineDashPhase: number, lineDashLengths: [number] }]
drawLimitLinesBehindData bool
axisMaximum number
axisMinimum number
granularity number
granularityEnabled bool
labelCount number
labelCountForce bool
centerAxisLabels bool Centers the axis labels instead of drawing them at their original position. This is useful especially for grouped BarChart.
valueFormatter one of 'largeValue', 'percent', 'date', string, [string]
valueFormatterPattern string
yOffset number 0 adjust vertical label position

xAxis

Common props plus props below.

Prop Type Default Note
labelRotationAngle number
avoidFirstLastClipping bool
position string Should be in upper case. you will get an error in android if the position is in lower case
valueFormatterPattern string

yAxis

Common props plus props below.

Prop Type Default Note
inverted number
left config Applies config to left line
right config Applies config to right line
spaceTop bool
spaceBottom number
position number
maxWidth bool
minWidth string
zeroLine {
enabled: bool,
lineWidth: number,
lineColor: number
}

Chart Base (All charts have these props)

Chart Base inherits props from react-native 'View' in addition to the props below.

Prop Type Default Note
animation {
durationX: number,
durationY: number,
easingX: string,
easingY: string
}		 Durations are in milliseconds.
chartBackgroundColor number
logEnabled bool
noDataText string
noDataTextColor number
touchEnabled bool
dragDecelerationEnabled bool
dragDecelerationFrictionCoef function
chartDescription Description
legend Legend
xAxis XAksis
marker {
enabled: bool,
digits: number,
markerColor: number,
textColor: number,
textSize: number
}
highlights Array of
{
x: number,
dataSetIndex: number,
dataIndex: number,
y: number,
stackIndex: number
}		 x is required and represents the index of the x values.
dataSetIndex is used in stacked bar chart.
dataIndex is necessary in combined chart when default highlight is set. The default sequence is line, bar, scatter, candle, bubble.

BarLineChartBase

Chart Base props plus props listed below.

Prop Type Default Note
drawGridBackground bool
gridBackgroundColor number
drawBorders bool
borderColor number
borderWidth number
minOffset number
maxVisibleValueCount number
visibleRange {
x: { min: number, max: number },
y: {
left: { min: number, max: number },
right: { min: number, max: number }
}
}
autoScaleMinMaxEnabled bool
keepPositionOnRotation bool
scaleEnabled bool
scaleXEnabled bool
scaleYEnabled bool
dragEnabled bool
pinchZoom bool
doubleTapToZoomEnabled bool
yAksis { left: YAksis, right: YAksis }
zoom {
scaleX: number,
scaleY: number,
xValue: number,
yValue: number,
axisDependency: 'LEFT' or 'RIGHT'
}
viewPortOffsets {
left: number,
top: number,
right: number,
bottom: number,
}

BarChart

ChartBase props plus props listed below.

Prop Type Default Note
drawValueAboveBar bool
drawBarShadow bool
data DataTypes.barData

BubbleChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
data DataTypes.bubbleData

CandleStickChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
data DataTypes.candleData

CombinedChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
data DataTypes.combinedData
drawOrder array with one of: ['SCATTER', 'BAR', 'LINE']

HorizontalBarChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
drawValueAboveBar bool
drawBarShadow bool
data DataTypes.barData

LineChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
data DataTypes.lineData

ScatterChart

BarLineChartBase props plus props listed below.

Prop Type Default Note
data DataTypes.scatterData

PieRadarChartBase

ChartBase props plus props listed below.

Prop Type Default Note
minOffset number
rotationEnabled bool
rotationAngle number

PieChart

PieRadarChartBase props plus props listed below.

Prop Type Default Note
extraOffsets {
left: number,
top: number,
right: number,
bottom: number,
}
drawEntryLabels bool
usePercentValues bool
centerText string
styledCenterText {
text: string,
color: number,
fontFamily: string,
size: number
}
centerTextRadiusPercent number
holeRadius number
holeColor number
transparentCircleRadius number
transparentCircleColor number
entryLabelColor number
entryLabelTextSize number
entryLabelFontFamily string
maxAngle number
data DataTypes.pieData

RadarChart

PieRadarChartBase props plus props listed below.

Prop Type Default Note
yAxis YAxis
drawWeb bool
skipWebLineCount number
data DataTypes.radarData

ConfigTypes

type common {
  colors: [number],
  highlightEnabled: bool,
  drawValues: bool,
  valueTextSize: number,
  valueTextColor: number,
  visible: bool,
  valueFormatter: string or 'largeValue' or 'percent' or 'date' or 'labelByXValue',
  valueFormatterPattern: string,
  valueFormatterLabels: {
    x: number, // required
    label: string // required
  },
  axisDependency: string,
}

type barLineScatterCandleBubble { highlightColor: number }

type lineScatterCandleRadar {
  drawVerticalHighlightIndicator: bool,
  drawHorizontalHighlightIndicator: bool,
  highlightLineWidth: number
}

type lineRadar 	{
  fillGradient: {
    colors: [number],
    // iOS
    positions: [numbers],
    angle: number,
    //Android
    orientation: 'TOP_BOTTOM' | 'TR_BL' | 'RIGHT_LEFT' | 'BR_TL' | 'BOTTOM_TOP' | 'BL_TR' | 'LEFT_RIGHT' | 'TL_BR',
  },
  fillColor: number,
  fillAlpha: number,
  drawFilled: function
}

DataTypes

type lineData {
  dataSets: [
    {
      values: [
        number or
        {
          x: number,
          y: number,
          marker: string
        }
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.barLineScatterCandleBubble,
        ...ConfigTypes.lineScatterCandleRadar,
        ...ConfigTypes.lineRadar,
        circleRadius: number,
        drawCircles: bool,
        mode: bool,
        lineWidth: number, // min: 0, max: 10
        drawCubicIntensity: number,
        circleColor: number,
        circleColors: [number],
        circleHoleColor: number,
        drawCircleHole: bool,
        dashedLine: {
          lineLength: number, // required
          spaceLength: number, // required
          phase: number
        },
        fillFormatter: {
            min: number // required
        }
      }
    }
  ]
}

type barData {
  dataSets: [
    {
      values: [
        {
          x: number,
          y: number or [number],
          marker: string or [string]
        }
        or number or [number]
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.barLineScatterCandleBubble,
        barShadowColor: number,
        highlightAlpha: number,  // using android format (0-255), not ios format(0-1), the conversion is x/255
        stackLabels: [string]
      }
    }
  ],
  config: {
    barWidth: number,
    group: {
      fromX: number, // required
      groupSpace: number, // required
      barSpace: number // required
    }
  }
}

type bubbleData {
  dataSets: [
    {
      values: [
        {
          x: PropTypes.number,
          y: PropTypes.number, // required
          size: PropTypes.number, // required
          marker: PropTypes.string,
        }
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.barLineScatterCandleBubble
      }
    }
  ]
}

type candleData {
  dataSets: [
    {
      values: [
        {
          x: number,
          shadowH: number, // required
          shadowL: number, // required
          open: number, // required
          close: number, // required
          marker: string,
        }
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.barLineScatterCandleBubble,
        ...ConfigTypes.lineScatterCandleRadar,

        barSpace: number,
        shadowWidth: number,
        shadowColor: number,
        shadowColorSameAsCandle: bool,
        neutralColor: number,
        decreasingColor: number,
        decreasingPaintStyle: string,
        increasingColor: number,
        increasingPaintStyle: string
      }
    }
  ]
}

type pieData {
  dataSets: [
    {
      values: [
        {
          value: number, // required
          label: string
        }
        or number
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,

        sliceSpace: number,
        selectionShift: number,
        xValuePosition: string, // INSIDE_SLICE,OUTSIDE_SLICE
        yValuePosition: string // INSIDE_SLICE,OUTSIDE_SLICE
      }
    }
  ]
}

type radarData {
  dataSets: [
    {
      values: [
        {
          value: number // required
        }
        or number
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.lineScatterCandleRadar,
        ...ConfigTypes.lineRadar
      }
    }
  ],
  labels: [string]
}

type scatterData {
  dataSets: [
    {
      values: [
        {
          x: number,
          y: number, // required
          marker: string,
        }
        or number
      ],
      label: string, // required
      config: {
        ...ConfigTypes.common,
        ...ConfigTypes.barLineScatterCandleBubble,
        ...ConfigTypes.lineScatterCandleRadar,

        scatterShapeSize: number,
        scatterShape: 'SQUARE' or 'CIRCLE' or 'TRIANGLE' or 'CROSS' or 'X'
        scatterShapeHoleColor: number,
        scatterShapeHoleRadius: number
      }
    }
  ],
  labels: [string]
}

type combinedData {
  lineData: lineData,
  barData: barData,
  scatterData: scatterData,
  candleData: candleData,
  bubbleData: bubbleData
}