gramex-multiline-chart v7.4.9

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:

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