Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Chart

Description#

The Chart is used to create a chart using the library armChart4.

Instalation#

Code Example

npm i @codecraftkit/chart @amcharts/amcharts4

Note: this component can not be imported from the core.

Note: You must install armchart in order to use this component.

Transpile Chart#

next-transpile-modules#

It is important to have armChart4 installed and transpile it to use this component.

If you are using next, you also have to install next-transpile-modules to use @codecraftkit/chart and transpile it or import it dynamic using its custom hooks.

Code Example

npm i next-transpile-modules

And export this from your next.config.js.

Code Example

const withTM = require("next-transpile-modules")([
    "@amcharts/amcharts4/core",
    "@amcharts/amcharts4/charts",
    "@amcharts/amcharts4/themes/animated",
    "@amcharts/amcharts4/plugins/timeline",
    "@amcharts/amcharts4/plugins/bullets"
    "@codecraftkit/chart"
]); // pass the modules you would like to see transpile;


module.exports = withTM({webpack: config => {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
    return config;
}});

Next Dynamic#

Using next dynamic to disabled ssr To import the chart component you have to use the hook useInitChart along with the @codecraftkit/chart like this.

Code Example

export const ChartContainer = () => {
  const {Chart} = useInitChart()
  return (
       <Chart data={data}/>
    )
};

The hook.

Code Example

import dynamic from 'next/dynamic'


const Chart = dynamic(
  () => import('@codecraftkit/chart').then((mod) => mod.Chart),
  { ssr: false }
)




export const useInitChart = () => {
  return { Chart }
}

Usage#

Dummy Data#

Code Example

data = [{
"category": "Lithuania",
"value": 501.9,
"marketing": 250
}, {
"category": "Czech Republic",
"value": 301.9,
"marketing": 222,
"sales": 251
}, {
"category": "Ireland",
"value": 201.1,
"marketing": 170
}, {
"category": "Germany",
"value": 165.8,
"marketing": 122
}, {
"category": "Australia",
"value": 139.9,
"marketing": 99
}];

XYChart#

By default the chart uses the type XYChart and takes the fields category to the X Axis and value to the Y Axis

To see more details go to XYChart page...

Code Example

<Chart data={data} />

Pie Chart#

To see more details go to XYChart page...

Code Example

<Chart data={data} type="PieChart" />

Options Example#

Options is an object that allow you to customize the chart as you want, more details in each chart page

Code Example

const optionsExample = {
  //XYChart Options
  xyChart:{
    //activate legend
    legend:true,
    //enable or disabled scroll bar
    disabledScrollBarXYChart:true,
    //y axis
    yAxis:{
      type:"value",
      tooltip:{
          disabledTooltip:true,
      },
      valueName:"marketing",
      name:"Category"
    },
    //x axis
    xAxis:{
      type:"category",
      tooltip:{
          disabledTooltip:true,
      },
      valueName:"category",
      name:"Countries"
    },
    //serie
    series:{
      type:"ColumnSeries",
      xAxisValueName:'category',
      yAxisValueName:'marketing',
      name:"Marketing",
      stacked:true,
      disabledTooltip:true,
      // tooltipText: "{name}: [bold]{valueY}[/]",
    },
  },
  //PieChart Options
  pieChart:{
    radiusInside:70,//central circle radius
    // type:"PieChart",
    series:{
      type:"PieSeries",
      value:'value',
      category:'category',
      name:'Value',
      scale:0.9,
      disabledTick:true,
      disabledLabel:true,
    }
  },
  //TimeLineChart Options
  timeLineChart:{
    xAxis:{
      type:"category",
      disabledTooltip:true,
      valueName:"category",
      rendererPoints:[
        { x: 0, y: 0 },
        { x: 100, y: 0 },
        { x: 500, y: -100 },
        { x: 700, y: -120 },
        { x: 800, y: -60 },
        { x: 900, y: 0 }
      ],
      tensionX:0.8,
      tensionY:1,
    },
    series:{
      type:"CurveLineSeries" ,
      // bullet:{
      //   radius,
      //   fill,
      //   strokeColor,
      //   width
      // }
    },
  }
 }

Code Example

<Chart data={data} options={optionsExample} />

Props#

name

type

required

default

description

type

XYChartPieChartTimeLineChartLinearProcessDiagramPictorialFractionChartSerpentineChartSolidGaugeChordDiagramMapManual

no

XYChart

Change the type of the chart

data

Array<object>

yes

Array of objects that will form each the Chart

name

Object

no

Random Number

Add an unique name to the chart

colors

array<colors>

no

Pass an array of colors to theme the chart

height

String

no

500px

Height of the Chart

options

object

no

Add many types of settings

updateOnOptionsChanged

Boolean

no

False

Allow chart to modified itself by changing the options prop, if this is not true the chart wont change on a options change

onLoadEnd

Function

no

Execute a function when the chart finish loading

map

geoJson

no

Pass a geoJson data from armchart in case you are using type Map, you can pass the geoJson by options as well