GRAMEX-Multiline-CHART

D3 multiline chart rendering for reusability purpOse.

Installation

  npm install gramex-multiline-chart

Dependencies

  npm install d3

Options/Config

Following options are available:

Name	Type	Description
data	data: [{"quarter": "Jan","score_csi": 82,"score_cbi": 47}]	Data for multiline chart
margin	Object { top: 5, right: 20, bottom: 15, left: 26 }	Specify margin
fillCSI	String	Fill color for tooltip dots (line1)
fillCBI	String	Fill color for tooltip dots(line2)
width	String	Width for SVG
height	String	height for SVG

Usage/Examples

HTML

<div id="gramexMultilineChart" class=""></div>

JS

const config = {
  width: 363,
  height: 400,
  paddingTop: 5,
  paddingBottom: 15,
  paddingLeft: 26,
  paddingRight: 20,
  fillCSI: "#0085CA",
  fillCBI: "#FE9D14",
  data: [
    {
      quarter: "Jan",
      score_csi: 82,
      score_cbi: 47,
    },
    {
      quarter: "Feb",
      score_csi: 64,
      score_cbi: 36,
    },
    {
      quarter: "Mar",
      score_csi: 64,
      score_cbi: 41,
    },
    {
      quarter: "Apr",
      score_csi: 63,
      score_cbi: 23,
    },
    {
      quarter: "May",
      score_csi: 71,
      score_cbi: 30,
    },
    {
      quarter: "Jun",
      score_csi: 64,
      score_cbi: 56,
    },
    {
      quarter: "Jul",
      score_csi: 62,
      score_cbi: 29,
    },
    {
      quarter: "Aug",
      score_csi: 72,
      score_cbi: 44,
    },
  ],
};
renderMultilineChart("#gramexMultilineChart", config);