Chart Components

./src/js/components/charts/

Purpose

A ton of awesome charts for displaying visually appealing data.

Important Items

line-chart.jsx
bar-chart.jsx
pie-chart.jsx
doughnut-chart.jsx
radar-chart.jsx
map-chart.jsx

LineChart - line-chart.jsx

Purpose

Displays a chart in a simple line chart format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/]

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's canvas element
Default - 'line-chart-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's canvas element
Default - '300'

height

Required - false
Data Type - STRING
Functionality - The height of the component's canvas element
Default - '200'

datasets

Required - false
Data Type - ARRAY
Functionality - You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below

axisLabels

Required - false
Data Type - ARRAY
Functionality - An array of labels for the linear sections on the chart

datasetLabel

Required - false
Data Type - STRING
Functionality - The label for this main dataset. Like saying "This graph section is about X data"

data

Required - false
Data Type - ARRAY
Functionality - An array of data points to display on the chart, usually made of numbers.

backgroundColor

Required - false
Data Type - STRING
Functionality - The fill colors of the chart.

borderColor

Required - false
Data Type - STRING
Functionality - The border colors of the chart.

borderWidth

Required - false
Data Type - NUMBER
Functionality - The widths of the chart's borders, set in pixels.

pointBackgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - A color string or array of color strings to color the background of points marked on the chart

pointBorderColor

Required - false
Data Type - ARRAY || STRING
Functionality - A color string or array of color strings to color the border of points marked on the chart

pointBorderWidth

Required - false
Data Type - ARRAY || NUMBER
Functionality - A number or array of numbers to set the width the borders on points marked on the chart

pointRadius

Required - false
Data Type - ARRAY || NUMBER
Functionality - The radius number or array of them that marks each point's radius

pointHoverRadius

Required - false
Data Type - ARRAY || NUMBER
Functionality - The radius number or array of them that marks each point's radius while hovered

pointHoverBackgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - The color string or array of them that marks each point's fill color while hovered

pointHoverBorderColor

Required - false
Data Type - ARRAY || STRING
Functionality - The color string or array of them that marks each point's border color while hovered

pointHoverBorderWidth

Required - false
Data Type - ARRAY || NUMBER
Functionality - The number or array of them that marks each point's border width, in pixels, while hovered

pointStyle

Required - false
Data Type - ARRAY || STRING
Functionality - "The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'"

fill

Required - false
Data Type - BOOL
Functionality - Fills the charted area with color instead of leaving it transparent. If left transparent, the chart only shows color on the outlined parts
Default - false

lineTension

Required - false
Data Type - NUMBER
Functionality - How smooth / curvey the chart lines are. 0 is the straightest line
Default - 0

borderCapStyle

Required - false
Data Type - STRING
Functionality - Line cap style, much like is the usual when using a Canvas element

showLine

Required - false
Data Type - BOOLEAN
Functionality - Display a line between each point of data

xAxisId

Required - false
Data Type - STRING
Functionality - The label for the X axis.

yAxisId

Required - false
Data Type - STRING
Functionality - The label for the Y axis.

options

Required - false
Data Type - OBJECT
Functionality - See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart.

Example

import LineChart from './src/js/components/charts/line-chart.jsx';

<LineChart
  id="line-chart-test"
  width="300px"
  height="200px"
  datasetLabel="Test Line Chart"
  xAxisID="X Id"
  yAxisID="Y Id"
  axislabels={["I1", "I2", "I3", "I4", "I5"]}
  data={[12, 9, 33, 6, 14]}
  backgroundColor="#ff0000"
  hoverBackgroundColor="#dd0000"
/>

BarChart - bar-chart.jsx

Purpose

Displays a chart in a simple bar graph format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/]

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's canvas element
Default - 'bar-chart-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's canvas element
Default - '300'

height

Required - false
Data Type - STRING
Functionality - The height of the component's canvas element
Default - '200'

datasets

Required - false
Data Type - ARRAY
Functionality - You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below

labels

Required - false
Data Type - ARRAY
Functionality - An array of labels for the linear sections on the chart

datasetLabel

Required - false
Data Type - STRING
Functionality - The label for this main dataset. Like saying "This graph section is about X data"

data

Required - false
Data Type - ARRAY
Functionality - An array of data points to display on the chart, usually made of numbers.

backgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - The fill colors of the chart.

borderColor

Required - false
Data Type - ARRAY || STRING
Functionality - The border colors of the chart.

borderWidth

Required - false
Data Type - ARRAY || NUMBER
Functionality - The widths of the chart's borders, set in pixels.

xAxisId

Required - false
Data Type - STRING
Functionality - The label for the X axis.

yAxisId

Required - false
Data Type - STRING
Functionality - The label for the Y axis.

borderSkipped

Required - false
Data Type - ARRAY || STRING
Functionality - Skipped borders for the data bars.
Expected Data - 'bottom', 'left', 'top', 'right'

hoverBackgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - The array of color strings that marks each section's fill color while hovered

hoverBorderColor

Required - false
Data Type - ARRAY || STRING
Functionality - The array of color strings that marks each section's border color while hovered

hoverBorderWidth

Required - false
Data Type - ARRAY || STRING
Functionality - The array of numbers that marks each section's border width, in pixels, while hovered

options

Required - false
Data Type - OBJECT
Functionality - See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart.

Default -

    {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }

Example

import BarChart from './src/js/components/charts/bar-chart.jsx';

<BarChart
  id="bar-chart-test"
  width="300px"
  height="200px"
  datasetLabel="Test Bar Chart"
  xAxisID="X Id"
  yAxisID="Y Id"
  labels={["I1", "I2", "I3", "I4", "I5"]}
  data={[12, 9, 33, 6, 14]}
  backgroundColor="#ff0000"
  hoverBackgroundColor="#dd0000"
/>

PieChart - pie-chart.jsx

Purpose

Displays a chart in a simple pie chart format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/]

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's canvas element
Default - 'pie-chart-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's canvas element
Default - '300'

height

Required - false
Data Type - STRING
Functionality - The height of the component's canvas element
Default - '300'

datasets

Required - false
Data Type - ARRAY
Functionality - You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below

axisLabels

Required - false
Data Type - ARRAY
Functionality - An array of labels for the radial sections on the chart

datasetLabel

Required - false
Data Type - STRING
Functionality - The label for this main dataset. Like saying "This graph section is about X data"

data

Required - false
Data Type - ARRAY
Functionality - An array of data points to display on the chart, usually made of numbers.

backgroundColor

Required - false
Data Type - ARRAY
Functionality - The fill colors of the chart.

borderColor

Required - false
Data Type - ARRAY
Functionality - The border colors of the chart.

borderWidth

Required - false
Data Type - ARRAY
Functionality - The widths of the chart's borders, set in pixels.

hoverBackgroundColor

Required - false
Data Type - ARRAY
Functionality - The array of color strings that marks each section's fill color while hovered

hoverBorderColor

Required - false
Data Type - ARRAY
Functionality - The array of color strings that marks each section's border color while hovered

hoverBorderWidth

Required - false
Data Type - ARRAY
Functionality - The array of numbers that marks each section's border width, in pixels, while hovered

options

Required - false
Data Type - OBJECT
Functionality - See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart.

Example

import PieChart from './src/js/components/charts/pie-chart.jsx';

<PieChart
  id="pie-chart-test"
  width="200px"
  height="200px"
  datasetLabel="Test Pie Chart"
  axisLabels={["I1", "I2", "I3", "I4", "I5"]}
  data={[12, 9, 33, 6, 14]}
  backgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]}
  hoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]}
/>

DoughnutChart - doughnut-chart.jsx

Purpose

Displays a chart in a simple pie-like chart format of data. The difference between this and a pie chart is that the center is hollowed out, much like a doughnut. Alternatively we could have called the PieChart component a DoughnutHoleChart, but that would just be silly. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/]

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's canvas element
Default - 'doughnut-chart-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's canvas element
Default - '300'

height

Required - false
Data Type - STRING
Functionality - The height of the component's canvas element
Default - '300'

datasets

Required - false
Data Type - ARRAY
Functionality - You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below

axisLabels

Required - false
Data Type - ARRAY
Functionality - An array of labels for the radial sections on the chart

datasetLabel

Required - false
Data Type - STRING
Functionality - The label for this main dataset. Like saying "This graph section is about X data"

data

Required - false
Data Type - ARRAY
Functionality - An array of data points to display on the chart, usually made of numbers.

backgroundColor

Required - false
Data Type - ARRAY
Functionality - The fill colors of the chart.

borderColor

Required - false
Data Type - ARRAY
Functionality - The border colors of the chart.

borderWidth

Required - false
Data Type - ARRAY
Functionality - The widths of the chart's borders, set in pixels.

hoverBackgroundColor

Required - false
Data Type - ARRAY
Functionality - The array of color strings that marks each section's fill color while hovered

hoverBorderColor

Required - false
Data Type - ARRAY
Functionality - The array of color strings that marks each section's border color while hovered

hoverBorderWidth

Required - false
Data Type - ARRAY
Functionality - The array of numbers that marks each section's border width, in pixels, while hovered

options

Required - false
Data Type - OBJECT
Functionality - See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart.

Example

import DoughnutChart from './src/js/components/charts/doughnut-chart.jsx';

<DoughnutChart
  id="doughnut-chart-test"
  width="200px"
  height="200px"
  datasetLabel="Test Doughnut Chart"
  axisLabels={["I1", "I2", "I3", "I4", "I5"]}
  data={[12, 9, 33, 6, 14]}
  backgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]}
  hoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]}
/>

RadarChart - radar-chart.jsx

Purpose

Displays a chart in a radar-like format. Give it a try, as that it is the best I can explain it. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/]

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's canvas element
Default - 'radar-chart-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's canvas element
Default - '300'

height

Required - false
Data Type - STRING
Functionality - The height of the component's canvas element
Default - '300'

datasets

Required - false
Data Type - ARRAY
Functionality - You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below

axisLabels

Required - false
Data Type - ARRAY
Functionality - An array of labels for the radial sections on the chart

fill

Required - false
Data Type - BOOL
Functionality - Fills the charted area with color instead of leaving it transparent. If left transparent, the chart only shows color on the outlined parts
Default - false

lineTension

Required - false
Data Type - NUMBER
Functionality - How smooth / curvey the chart lines are. 0 is the straightest line

borderCapStyle

Required - false
Data Type - STRING
Functionality - Line cap style, much like is the usual when using a Canvas element

datasetLabel

Required - false
Data Type - STRING
Functionality - The label for this main dataset. Like saying "This graph section is about X data"

data

Required - false
Data Type - ARRAY
Functionality - An array of data points to display on the chart, usually made of numbers.

backgroundColor

Required - false
Data Type - STRING
Functionality - The fill color of the chart.

borderColor

Required - false
Data Type - STRING
Functionality - The border color of the chart.

borderWidth

Required - false
Data Type - NUMBER
Functionality - The width of the chart's borders, set in pixels.

pointBackgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - A color string or array of color strings to color the background of points marked on the chart

pointBorderColor

Required - false
Data Type - ARRAY || STRING
Functionality - A color string or array of color strings to color the border of points marked on the chart

pointBorderWidth

Required - false
Data Type - ARRAY || NUMBER
Functionality - A number or array of numbers to set the width the borders on points marked on the chart

pointRadius

Required - false
Data Type - ARRAY || NUMBER
Functionality - The radius number or array of them that marks each point's radius

pointHoverRadius

Required - false
Data Type - ARRAY || NUMBER
Functionality - The radius number or array of them that marks each point's radius while hovered

pointHoverBackgroundColor

Required - false
Data Type - ARRAY || STRING
Functionality - The color string or array of them that marks each point's fill color while hovered

pointHoverBorderColor

Required - false
Data Type - ARRAY || STRING
Functionality - The color string or array of them that marks each point's border color while hovered

pointHoverBorderWidth

Required - false
Data Type - ARRAY || NUMBER
Functionality - The number or array of them that marks each point's border width, in pixels, while hovered

pointStyle

Required - false
Data Type - ARRAY || STRING
Functionality - "The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'"

options

Required - false
Data Type - OBJECT
Functionality - See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart.

Example

import RadarChart from './src/js/components/charts/radar-chart.jsx';

<RadarChart
  id="my-little-radar"
  width="400"
  height="450"
  datasetLabel="The Chartest AFRadar"
  axisLabels={["I1", "I2", "I3", "I4", "I5"]}
  data={[12, 9, 33, 6, 14]}
  pointBackgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]}
  pointHoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]}
/>

MapChart - map-chart.jsx

Requirements

This project requires you pull in jVectorMap .js and .css files into your project. We do not provide those.

Purpose

Displays a chart in a map format. Much of the prop documentation can be found on jVectorMap's documentation.

Props

id

Required - false
Data Type - STRING
Functionality - The id of the component's main element
Default - 'world-map-0'

width

Required - false
Data Type - STRING
Functionality - The width of the component's main element
Default - '100%'

height

Required - false
Data Type - STRING
Functionality - The height of the component's main element
Default - '300px'

mapParams

Required - false
Data Type - OBJECT
Functionality - An object containing keys equal to all of the props below if you didn't want to input them via React Props.

map

Required - false
Data Type - STRING
Functionality - The type of map to be used for the component
Default - 'world_mill_en'

backgroundColor

Required - false
Data Type - STRING
Functionality - The color of the map's background. Covers hex, rgb, rgba.
Default - '#555555'

zoomOnScroll

Required - false
Data Type - BOOLEAN
Functionality - Whether you want to zoom via mouse scrolls.
Default - true

zoomOnScrollSpeed

Required - false
Data Type - NUMBER
Functionality - From 1 - 10, mouse speed on zoom scrolling.
Default - 3

panOnDrag

Required - false
Data Type - BOOLEAN
Functionality - Whether you want to pan by dragging the map.
Default - true

zoomMax

Required - false
Data Type - NUMBER
Functionality - The maximum zoom ratio reachable while zooming the map
Default - 8

zoomMin

Required - false
Data Type - NUMBER
Functionality - The minimum zoom ratio reachable while zoominb the map
Default - 1

zoomStep

Required - false
Data Type - NUMBER
Functionality - The multiplier for zooming when clicking the +/- buttons
Default - 1.6

zoomAnimate

Required - false
Data Type - BOOLEAN
Functionality - Whether to animate zoomingness when clicking +/- buttons.
Default - false

regionsSelectable

Required - false
Data Type - BOOLEAN
Functionality - Ability to select regions on the map
Default - false

regionsSelectableOne

Required - false
Data Type - BOOLEAN
Functionality - Can only one region on the map be selected at a time?
Default - false

markersSelectable

Required - false
Data Type - BOOLEAN
Functionality - The ability to select markers on the map
Default - false

markersSelectableOne

Required - false
Data Type - BOOLEAN
Functionality - Can only one marker be selected at a time?
Default - false

regionStyle

Required - false
Data Type - OBJECT
Functionality - Styling for map regions via css-like javascript object.

Default -

  {
    initial: {
      fill: '#bbbbbb',
      "fill-opacity": 1,
      stroke: 'none',
      "stroke-width": 0,
      "stroke-opacity": 1
    },
    hover: {
      "fill-opacity": 0.8,
      cursor: 'pointer'
    },
    selected: {
      fill: 'yellow'
    }
  }

regionLabelStyle

Required - false
Data Type - OBJECT
Functionality - Styling for region labels via css-like object.

Default -

  {
    initial: {
      'font-family': 'Verdana',
      'font-size': '12',
      'font-weight': 'bold',
      cursor: 'default',
      fill: 'black'
    },
    hover: {
      cursor: 'pointer'
    }
  }

markerStyle

Required - false
Data Type - OBJECT
Functionality - Styling for markers via css-like object

Default -

  {
    initial: {
      fill: 'grey',
      stroke: '#505050',
      "fill-opacity": 1,
      "stroke-width": 1,
      "stroke-opacity": 1,
      r: 5
    },
    hover: {
      stroke: 'black',
      "stroke-width": 2,
      cursor: 'pointer'
    },
    selected: {
      fill: 'blue'
    },
    selectedHover: {
    }
  }

markerLabelStyle

Required - false
Data Type - OBJECT
Functionality - Styling for marker labels via css-like object

Default -

  {
    initial: {
      'font-family': 'Verdana',
      'font-size': '12',
      'font-weight': 'bold',
      cursor: 'default',
      fill: 'black'
    },
    hover: {
      cursor: 'pointer'
    }
  }

markers

Required - Set of markers to add to the map during initialization
Data Type - ARRAY || OBJECT
Functionality - Desc

Expected Data -

  [{
    name: 'string to show on marker tip',
    latLng: [25, 42]
  }]

series

Required - false
Data Type - OBJECT
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

focusOn

Required - false
Data Type - OBJECT || STRING
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

labels

Required - false
Data Type - OBJECT
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

selectedRegions

Required - false
Data Type - OBJECT || ARRAY || STRING
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

selectedMarkers

Required - false
Data Type - OBJECT || ARRAY || STRING
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onRegionTipShow

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onRegionOver

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onRegionOut

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onRegionClick

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onRegionSelected

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onMarkerTipShow

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onMarkerOver

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onMarkerOut

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onMarkerClick

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onMarkerSelected

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

onViewportChange

Required - false
Data Type - FUNCTION
Functionality - See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding

Example

import MapChart from './src/js/components/charts/map-chart.jsx';

<MapChart
  id="test-map"
  map="world_mill_en"
/>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CHARTS.md

CHARTS.md

Chart Components

Purpose

Important Items

LineChart - line-chart.jsx

Purpose

Props

Example

BarChart - bar-chart.jsx

Purpose

Props

Example

PieChart - pie-chart.jsx

Purpose

Props

Example

DoughnutChart - doughnut-chart.jsx

Purpose

Props

Example

RadarChart - radar-chart.jsx

Purpose

Props

Example

MapChart - map-chart.jsx

Requirements

Purpose

Props

Example

Files

CHARTS.md

Latest commit

History

CHARTS.md

File metadata and controls

Chart Components

Purpose

Important Items

LineChart - line-chart.jsx

Purpose

Props

Example

BarChart - bar-chart.jsx

Purpose

Props

Example

PieChart - pie-chart.jsx

Purpose

Props

Example

DoughnutChart - doughnut-chart.jsx

Purpose

Props

Example

RadarChart - radar-chart.jsx

Purpose

Props

Example

MapChart - map-chart.jsx

Requirements

Purpose

Props

Example