Skip to content

Latest commit

 

History

History
485 lines (419 loc) · 29.9 KB

docs.md

File metadata and controls

485 lines (419 loc) · 29.9 KB
Raw

Documentation

Description (prop for all charts)

Prop Type Default Note
text string
textColor number
textSize number
positionX number
positionY number
fontFamily string
fontStyle 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
position number
form string
formSize number
xEntrySpace bool
yEntrySpace number
formToTextSpace number
custom {
colors: [number],
labels: [string]
}

Common Props for xAksis 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 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

xAksis

Common props plus props below.

Prop Type Default Note
labelRotationAngle number
avoidFirstLastClipping bool
position string
valueFormatterPattern string

yAksis

Common props plus props below.

Prop Type Default Note
inverted number
spaceTop bool
spaceBottom string
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
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

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
drawEntryLabels bool
usePercentValues bool
centerText string
styledCenterText {
text: string,
color: number,
size: number
}
centerTextRadiusPercent number
holeRadius number
holeColor number
transparentCircleRadius number
transparentCircleColor number
entryLabelColor number
entryLabelTextSize number
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: bool,
  valueFormatterPattern: string or 'largeValue' or 'percent' or 'date',
  axisDependency: string,
}

type barLineScatterCandleBubble { highlightColor: number }

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

type lineRadar 	{
  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,
        drawCubicIntensity: number,
        circleColor: number,
        circleColors: [number],
        circleHoleColor: number,
        drawCircleHole: bool,
        dashedLine: {
          lineLength: number, // required
          spaceLength: number, // required
          phase: number
        },
      }
    }
  ]
}

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,
        yValuePosition: string
      }
    }
  ]
}

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
}