GRAMEX STACKED PLOT

d3 stacked plot rendering for reusability purpOse.

Installation

  npm install gramex-stacked-plot

Dependencies

  npm install d3
  npm install lodash

Options/Config

Following options are available:

| Name | Type | Description | | ------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | | data | data: [{brand: 'Pepsi', animatic: 52, finished_film: 30}] | Data for Stacked plot. | | margin | Object { top: 178, right: 57, bottom: 55, left: 70 } | Specify margin | | labelTopPadding | number | Top padding for xAxis labels | | labelRightPadding | number | Right padding for yAxis labels | | barWidth | number | Thickness of stacked plot | | width | number | Width for SVG | | height | number | height for SVG |

Usage/Examples

HTML

<div id="gramexStackedPlot" class=''></div>

JS

const config = {
        width: 952,
        height: 500,
        marginTop: 178,
        marginBottom: 55,
        marginLeft: 70,
        marginRight: 57,
        labelTopPadding: 15,
        labelRightPadding: 35,
        data: [
              {brand: 'Pepsi', animatic: 52, finished_film: 30},
              {brand: 'Lays', animatic: 40, finished_film: 40},
              {brand: 'coka, cola', animatic: 45, finished_film: 50},
              {brand: 'Rockstar, Energy', animatic: 30, finished_film: 40},
              {brand: 'Funny, Frish', animatic: 25, finished_film: 40},
              {brand: 'Red, Bull', animatic: 20, finished_film: 70},
              {brand: '28 Black', animatic: 15, finished_film: 22},
              {brand: 'Lorenz', animatic: 60, finished_film: 46},
              {brand: 'Rockstar', animatic: 35, finished_film: 67}
        ]
    };
    renderStackedPlot("#gramexStackedPlot", config)