CodeCraft Kit

@codecraftkit

Documentation

XYChart

Description#

We use XY chart to plot any kind of serial 2/3 dimensional data, including line, area, column, bar, candlestick and stepline.

This component is based on AmCharts v4

Usage#

Dummy Data#

The XYChart will use the fields category for the xAxis and value for the yAxis of the data and it shows a top scrollbar by default.

Code Example

const data = [{
  "category": "Lithuania",
  "value": 501.9,
},{
  "category": "Czech Republic",
  "value": 301.9,
},{
  "category": "Ireland",
  "value": 201.1,
},{
  "category": "Germany",
  "value": 165.8,
},{
  "category": "Australia",
  "value": 139.9,
}];

Simple Usage#

Code Example

<Chart data={data}  type='XYChart' />

Custom Options to XYChart#

Code Example

<Chart data={data}  type='XYChart' options={optionsExample} />

The Options prop is an object that allows to customize the chart

To customize the XYChart have to pass a object inside options called xyChart and inside it all the options want to modify

For example lets see this data

Code Example

const data = [{
  "name": "Monica",
  "steps": 12000
}, {
  "name": "Joey",
  "steps": 35781
}, {
  "name": "Ross",
  "steps": 40000
}, {
  "name": "Phoebe",
  "steps": 18788
}, {
  "name": "Rachel",
  "steps": 15465
}, {
  "name": "Chandler",
  "steps": 25000
}];

To explain this better lets use the serie type ColumnSeries we'll explain the series types later

If we use this data like this, the Chart won't do anything because there aren't any value or category field, so we need to tell the chart to get the params name and steps from the data using options like this:

Code Example

const optionsExample = {
//XYChart Options
xyChart:{
  //disabled default scroll bar
  disabledScrollBarXYChart:true,
  //y axis
  yAxis:{
    //field to get from data
    valueName:"steps",
    //yAxis Title
    name:"Steps"
  },
  //x axis
  xAxis:{
    //field to get from data
    valueName:"name",
    //xAxis Title
    name:"Names"
  },
  series:{
    type:"ColumnSeries"
  }
},
};

We also remove the top scrollbar, Now if we pass the options to the chart:

Now what happen if we want to show the names in the YAxis and the steps in the XAxis, We should use a another axis type to get a different type of data, we'll see the others axis types later

The default axis type to XAxis is category and for the YAxis is value, lets change it:

Code Example

const optionsExample = {
  //XYChart Options
  xyChart:{
      //disabled default scroll bar
      disabledScrollBarXYChart:true,
      //y axis
      yAxis:{
          //Indicate that we will use strings in place of values
          type:'category',
          //field to get from data
          valueName:"name",
          //yAxis Title
          name:"Names"
      },
      //x axis
      xAxis:{
          //Indicate that we will use values in place of strings
          type:'value',
          //field to get from data
          valueName:"steps",
          //xAxis Title
          name:"Steps"
      },
      series:{
          type:"ColumnSeries",
          tooltipText:`{valueX.value}`
      }
  },
};

Note: We change the tooltip text because we want to show the values from the XAxis And not the YAxis

Options#

XYChart Options Data#

name

type

default

description

getChart

function

Function that receive the chart to customize it

inputDateFormat

String

Set the format of the date

legend

ObjectBoolean

false

Value that shows a Chart Legend

disabledScrollBarXYChart

Boolean

false

Add an X axis Scrollbar

disabledCursor

Boolean

false

Remove the cursor

cursor

Object

Customize cursor

xAxis

Object

Customize xAxis

yAxis

object

Customize yAxis

series

objectarray>objects

Customize and add series

axisBreak

object

Add an axisBreak between two values

axisRange

object

Add an axisRange between two values

Axis Data#

Both Axis takes the same params

name

type

default

description

type

categorydatedurationvalue

Depends in the axis

Select Axis Type

getAxis

function

Function that receive the axis to customize it

valueName

String

Depends in the chosen type

The name of the field to use in this axis

name

String

Axis Title

inside

Boolean

false

Put the Axis inside the grid

inversed

Boolean

false

Inverse the order of the data

enableStriped

Boolean

false

enable stripped lines

stripedFill

Color hex

Change the stripes Color

stripedFillOpacity

Number

0.5

Change Opacity color of the stripes

min

Number

Set a min axis Value

max

Number

Set a max axis Value

ticksDisabled

Boolean

false

Ticks are smalls lines between labels and grid lines

minWidth

Number

Axis min Width

location

Number

location is a relative value, defining elements position withing particular cell, The range of location values is from 0 to 1.

startLocation , endLocation,

Number

Setting where axis starts and ends, The range of location values is from 0 to 1.

cellStartLocation , cellEndLocation,

Number

control where cell actually starts and ends., The range of location values is from 0 to 1.

minGridDistance

Number

Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels..

baseInterval

Object

Interval in what the data will be shown example: {timeUnit: "year", count: 1}

aboveSeries

Boolean

false

Place grid lines above the series

BaseGridStrokeOpacity

Number

change baseGrid line stroke opacity

gridStrokeOpacity

Number

change the opacity of the grid lines

labels

Object

Customize labels: labelRotate labelOpacity horizontalCenter labelsLocation labelDx labelDy moveLabelsLeft

tooltip

Object

Customize tooltip: disabledTooltip tooltipLocation tooltipDx tooltipDy backgroundFillOpacity cornerRadius labelFill paddingRight paddingTop paddingleft paddingBottom disabledTooltip

Axis Break Data#

Add an Axis Break between to values

name

type

default

description

getAxisBreak

function

Function that receive the axis to customize it

axisLocation

XAxisYAxis

YAxis

Select the axis to create an axis break

startValue

Number

Start of the axis break

endValue

Number

End of the axis break

breakSize

Number

0.05

Size of the axis Break

Axis Range Data#

Add an Axis Range between to values

name

type

default

description

getAxis

function

Function that receive the axis to customize it

axisLocation

XAxisYAxis

YAxis

Select the axis to create an axis break

startValue

Number

2100

Start of the axis break

endValue

Number

22900

End of the axis break

fill

Color hex

Background color of the axis range

fillOpacity

Number

0.2

Opacity of the Axis Range Background

stroke

Color hex

Stroke color

strokeWidth

Number

Width of the Axis Range Stroke

strokeOpacity

Number

0.2

Opacity of the Axis Range Stroke

strokeDasharray

Number

size of the stroke in dasharray form

text

String

Label Text

disabledInside

Boolean

false

Put the label inside or outside the grid

aboveSeries

Boolean

false

Put the axis range above the series

rotation

Number

Rotate the label

horizontalCenter

noneleftmiddleright

right

Sets which part of the element is a "horizontal center"

verticalCenter

nonetopmiddlebottom

bottom

Sets which part of the element is a "vertical center"

Series Data#

Customize the data, could use a single object, or an array of objects

name

type

default

description

getSeries

function

Function that receive the series to customize it

type

String

LineSeries

Select the series type

xAxisValueName

String

category

value name for the xAxis

yAxisValueName

String

value

value name for the yAxis

openY

String

Where to start the series on the yAxis

openX

String

Where to start the series on the yAxis

name

String

Series Title

stacked

Boolean

Allow to stack series

fill

Color hex

Change the serie color

fillOpacity

Number

Background Opacity

stroke

Color hex

Change the stroke color

strokeWidth

number

1

Change Stroke Width

disabledTooltip

Boolean

false

Disabled tooltip

tooltipText

String

{valueY.value}

Text of the tooltip

transitionDuration

Number

Duration in ms of the transition

tooltipHTML

String

Place HTML tags inside the tooltip

tooltipFill

Color hex

Tooltip background color

tooltipGetFillFromObject

Boolean

Get fill value from object

tooltipGetStrokeFromObject

Boolean

Get fill stroke from object

tooltipStrokeWidth

Number

Tooltip stroke size

pointerOrientation

horizontalverticalupdownrightleft

Position Where the tooltip will be placed

tooltipDy

Number

Position of the tooltip in Y axis

tooltipDx

Number

Position of the tooltip in X axis

columnsWidth

Number

Custom Columns width

columnsHeight

Number

Custom Columns height

columnsMaxHeight

Number

Column max height

columnsMaxWidth

Number

Column max width

columnsStrokeOpacity

Number

Customize stroke opacity of the columns

columnsCornerRadius

array>Numbers

Set the radius of each corner of the column example: [60, 10, 60, 10]

movingImageBullets

verticalhorizontal

Add moving bullets to the columns series with images

columnsHeatRules

Object

Object used to add custom colors to the columns

mainContainerMask

Boolean

Enabled or disabled masks

bullets

Objectarray

object to customize bullets: radius locationY locationX horizontalCenter verticalCenter fill fillOpacity stroke strokeWidth strokeOpacity

Series types#

Only for the XYChheadOptionsKeys />