GRAMEX-Multiline-CHART
D3 multiline chart rendering for reusability purpOse.
Installation
npm install gramex-multiline-chartDependencies
npm install d3Options/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);