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);