Skip to content

replot-line: Intelligent and customizable line chart components for react.

License

Notifications You must be signed in to change notification settings

replot/replot-line

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

replot-line: Line charts for react

Intelligent and customizable line chart components for react.

Installation

Only works with React projects. React must be installed separately.

npm install replot-line

Then with a module bundler like webpack/browserify that supports CommonJS/ES2015 modules, use as you would anything else.

import LineChart from 'replot-line'

Quick Start

replot-line is designed to create beautiful line charts right out of the box. The only required input is properly formatted data.

In the simplest case, just supply data (as a Javascript array) and specify the keys associated with the values:

render() {
    let markets = [
        {index: "Dow Jones", year: 2006, value: 12463.15},
        {index: "Dow Jones", year: 2007, value: 13264.82},
        {index: "Dow Jones", year: 2008, value: 8776.39},
        {index: "Dow Jones", year: 2009, value: 10428.05},
        {index: "Dow Jones", year: 2010, value: 11577.51},
        {index: "Dow Jones", year: 2011, value: 12217.56},
        {index: "Dow Jones", year: 2012, value: 13104.14},
        {index: "Dow Jones", year: 2013, value: 16576.66},
        {index: "Dow Jones", year: 2014, value: 17823.07},
        {index: "Dow Jones", year: 2015, value: 17425.03},
        {index: "Dow Jones", year: 2016, value: 19762.6},
        {index: "S&P 500", year: 2006, value: 1418.3},
        {index: "S&P 500", year: 2007, value: 1468.36},
        {index: "S&P 500", year: 2008, value: 903.25},
        {index: "S&P 500", year: 2009, value: 1115.1},
        {index: "S&P 500", year: 2010, value: 1257.64},
        {index: "S&P 500", year: 2011, value: 1257.6},
        {index: "S&P 500", year: 2012, value: 1426.19},
        {index: "S&P 500", year: 2013, value: 1848.36},
        {index: "S&P 500", year: 2014, value: 2058.9},
        {index: "S&P 500", year: 2015, value: 2043.94},
        {index: "S&P 500", year: 2016, value: 2238.83},
        {index: "NASDAQ 100", year: 2006, value: 1756.9},
        {index: "NASDAQ 100", year: 2007, value: 2084.93},
        {index: "NASDAQ 100", year: 2008, value: 1211.65},
        {index: "NASDAQ 100", year: 2009, value: 1860.31},
        {index: "NASDAQ 100", year: 2010, value: 2217.86},
        {index: "NASDAQ 100", year: 2011, value: 2277.83},
        {index: "NASDAQ 100", year: 2012, value: 2660.93},
        {index: "NASDAQ 100", year: 2013, value: 3592},
        {index: "NASDAQ 100", year: 2014, value: 4236.28},
        {index: "NASDAQ 100", year: 2015, value: 4593.27},
        {index: "NASDAQ 100", year: 2016, value: 4863.62},
    ]

    return(
        <LineChart data={markets}
            groupKey="index"
	    xKey="year"
            yKey="value"
	/>
    )
}
  • data is the only required prop
  • groupKey defaults to "group"
  • xKey defaults to "x"
  • yKey defaults to "y"

Including a groupKey will draw multiple lines on your LineChart, one for each group, however this prop is optional.

ScreenshotLineDefault

API

Dimensions

Dimensions may be specified by passing in width and height props with numbers in the unit of pixels.

render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
    	width={600}
      	height={450}
    />
  )
}
  • width defaults to 800
  • height defaults to 600

Width dimensions may also be specified with a string, as a percentage. The width will then be calculated as a proportion of the parent container.

render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
        width="50%"
        height={450}
    />
  )
}
Default width={600} height={450} width="50%" height={450}
ScreenshotDefaultDimensions ScreenshotWidth600pxHeight450px ScreenshotWidth50%Height450px

Colors

Colors may be specified through 2 different mechanisms, both through a color prop. If none of the mechanisms are specified, LineChart defaults to a built in color palette.

User-provided Color Palette

Users can specify a list of colors to use as a palette, passed to the color prop.

render() {
  let colors = ["#ff3232", "#ff7f7f", "#ffcccc"]

  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
    	color={colors}
    />
  )
}

User-provided Color Function

Users can also specify a function to assign colors to different data series. Expected arguments to the function are the index of the data series (from 0) and the title of the data series (if it exists).

let colorMe = (i, group) => {
  if (group === "Dow Jones") {
    return "gray"
  } else {
    return "red"
  }
}

render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
    	color={colorMe}
    />
  )
}
color={colors} color={colorMe}
ScreenshotColorArray ScreenshotColorFunction

Graph Style

Users can customize the style of graph elements by passing in the prop(s) below:

  • lineWidth
    • Determines the thickness of the lines drawn on the LineChart
    • Defaults to 2.5
    • Accepts any number value
  • pointWidth
    • Determines the width of points on the line
    • Defaults to 5
    • Accepts any number value
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
    	lineWidth={5}
	pointWidth={10}
    />
  )
}
Default lineWidth={5} pointWidth={10}
ScreenshotLineDefault ScreenshotGraphStyle

Axis Customization

Replot LineCharts allow for incredible customization of the graph axis. A complete explanation of axis customization can be found below:

Titles

Title props accept strings to display in the appropriate location on the graph. To compensate for the inclusion of a title, graph content will be condensed, but the overall size of the component will stay constant.

  • graphTitle: string displayed above the graph
  • xTitle: string displayed left of the x-axis
  • yTitle: string displayed under the y-axis
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      graphTitle="Annual Trends in Market Indices"
      xTitle="Year"
      yTitle="Index Value"
    />
  )
}
Default Custom titles
ScreenshotLineDefault ScreenshotGraphTitles

Displaying Axis Elements

Users can customize the display of the lines, labels, and gridlines of the axes.

  • showXAxisLine: defaults to true, controls display of the x-axis line
  • showYAxisLine: defaults to true, controls display of the y-axis line
  • showXLabels: defaults to true, controls display of labels on the x-axis
  • showYLabels: defaults to true, controls display of labels on the y-axis
  • showGrid: defaults to true, controls display of gridlines
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	showXAxisLine={false}
	showYAxisLine={false}
	showXLabels={false}
	showYLabels={false}
	showGrid={false}
    />
  )
}
Lines hidden Labels hidden
ScreenshotLinesHidden ScreenshotLabelsHidden

Axis Scale

Users can control the scale of the graph, linear or logarithmic. Users can also control the number of increments on the y-axis.

  • yScale: defaults to "lin" for linear scale, can be "log" for logarithmic scale
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	yScale="log"
    />
  )
}
  • ySteps: defaults to 1 division per 100 pixels, accepts a number given by the user
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	ySteps={20}
    />
  )
}
yScale="log" yStep={20}
ScreenshotScaleLog ScreenshotSteps200

Axis Style

Users can customize the axis style by passing in the prop(s) below:

  • axisColor
    • modifies the color of axis lines
    • defaults to "#AAA"
    • accepts any color string
  • tickColor
    • modifies the color of axis ticks
    • defaults to "#AAA"
    • accepts any color string
  • gridColor
    • modifies the color of axis gridlines
    • defaults to "#AAA"
    • accepts any color string
  • labelColor
    • modifies the color of both axis labels
    • defaults to "#AAA"
    • accepts any color string
  • graphTitleColor
    • modifies the color of all graph titles
    • defaults to "#AAA"
    • accepts any color string
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	axisColor="#ff0000"
	tickColor="#ff0000"
	gridColor="#ff0000"
	labelColor="#ff0000"
	graphTitleColor="#ff0000"
    />
  )
}
  • axisWidth
    • modifies the thickness of axis lines
    • defaults to 1.5
    • accepts any number
  • tickWidth
    • modifies the thickness of axis ticks
    • defaults to 1.5
    • accepts any number
  • gridWidth
    • modifies the thickness of axis gridlines
    • defaults to 1
    • accepts any number
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	axisWidth={5}
	tickWidth={5}
	gridWidth={5}
    />
  )
}
  • axisOpacity
    • modifies the opacity of axis lines
    • defaults to 1
    • accepts any number
  • tickOpacity
    • modifies the opacity of axis ticks
    • defaults to 1
    • accepts any number
  • gridOpacity
    • modifies the opacity of axis gridlines
    • defaults to 0.5
    • accepts any number
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
      	axisOpacity={0.2}
	tickOpacity={0.2}
	gridOpacity={0.2}
    />
  )
}
Custom colors Custom widths Custom opacities
ScreenshotAxisColors ScreenshotAxisWidths ScreenshotAxisOpacities
  • labelFontSize
    • sets the font size of both axis labels
    • automatically calculated when unspecified
    • accepts any number
  • graphTitleFontSize
    • sets the font size of all graph titles
    • automatically calculated when unspecified
    • accepts any number
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
        labelFontSize={8}
    	graphTitleFontSize={10}
    />
  )
}
  • labelFontFamily
    • sets the font family of both axis labels
    • inherits when unspecified
    • accepts any font family name string
  • graphTitleFontFamily
    • sets the font family of all graph titles
    • inherits when unspecified
    • accepts any font family name string
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	labelFontFamily="Courier"
	graphTitleFontFamily="Courier"
    />
  )
}
Custom font sizes Custom font families
ScreenshotAxisFontSizes ScreenshotAxisFontFamilies

Legend Customization

Users can customize the graph legend in several ways.

  • showLegend: defaults to true, controls display of the legend
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	showLegend={false}
    />
  )
}
Default showLegend={false}
ScreenshotLineDefault ScreenshotLegendHidden

Legend Style

Users can customize the legend style by passing in the prop(s) below:

  • legendFontColor
    • Modifies the color of the font used in the legend
    • Defaults to "#AAA"
    • Accepts any color string
  • legendBackground
    • Modifies the background color of the legend
    • Defaults to "none"
    • Accepts any color string
  • legendShowBorder
    • Determines whether a border will be drawn around the legend
    • Defaults to false
    • Accepts true or false
  • legendBorderColor
    • Modifies the color of the border of the legend
    • Defaults to "#AAA"
    • Accepts any color string
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	legendFontColor="#ff0000"
	legendBackground="#ffffff"
	legendShowBorder={true}
	legendBorderColor="#ff0000"
    />
  )
}
Default Custom Style
ScreenshotLineDefault ScreenshotLegendStyle
  • legendFontSize
    • sets the font size of legend texts
    • automatically calculated when unspecified
    • accepts any number
  • legendFontFamily
    • sets the font family of legend texts
    • inherits when unspecified
    • accepts any font family name string
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
  legendFontSize={10}
  legendFontFamily="Courier"
    />
  )
}
Default legendFontSize={10} legendFontFamily="Courier"
ScreenshotLineDefault ScreenshotLegendFontSize ScreenshotLegendFontFamily

Area Customization

Users can control the display of shaded areas under the lines of the graph.

  • shadeArea: defaults to false, controls display of the shaded areas
render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	shadeArea={true}
    />
  )
}
Default shadeArea={true}
ScreenshotLineDefault ScreenshotLegendStyle

Tooltip

Tooltips can display more specific information about a data series.

render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	tooltip={false}
	tooltipColor="light"
    />
  )
}
  • tooltip defaults to true, false turns the tooltip off
  • tooltipColor defaults to dark, it can be set to light or dark
Default tooltip tooltipColor="light" tooltip={false}
ScreenshotTooltipDefault ScreenshotTooltipLight ScreenshotTooltipHidden

User-provided Tooltip Function

Users can customize what is displayed inside the tooltip with a function. Expected arguments to the function are the data for the specific point hovered over and an array of data for the line hovered over. The function should return JSX.

let fillTooltip = (pointData, lineData) => {
  return(
    <span>The data for this point looks like {JSON.stringify(pointData)}</span>
  )
}

render() {
  return(
    <LineChart data={markets} groupKey="index" xKey="year" yKey="value"
	tooltipContents={fillTooltip}
    />
  )
}

ScreenshotTooltipCustom

Animation Customization

Users can control the initial animation of the graph, lines growing out from the y-axis line.

  • initialAnimation: defaults to true, controls the animation

About

replot-line: Intelligent and customizable line chart components for react.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published