How to use the dc.legend function in dc

}
            else {
                console.log( "barchart: Reduction not supported for facet", this.model.secondary.reduction, this.model.secondary);
            }

            chart
                .hidableStacks(false)  // FIXME: unexplained crashed when true, and a category is selected from the legend
                .dimension(this.model._crossfilter.dimension)
                .group(this.model._crossfilter.group, domain[0])
                .valueAccessor(stackFn(0));

            for(var i=1; i < domain.length; i++) {
                chart.stack(this.model._crossfilter.group, domain[i], stackFn(i));
            }

            chart.legend(dc.legend().x(100).y(0).itemHeight(13).gap(5));
        }

        // Regular barchart, if secondary is falsy
        // Else, group by facetA, take value of facetB
        else {
            chart
                .dimension(this.model._crossfilter.dimension)
                .group(this.model._crossfilter.group)
                .valueAccessor(this.model._crossfilter.valueAccessor);
        }

        // Center for continuous, don't for ordinal plots
        chart.centerBar(! chart.isOrdinal());

        // custom filter handler
        chart.filterHandler(function (dimension, filters) {

_addChartLegend(width, height) {
    // Do not try to render the legend if we don't have a width or height yet. Avoids NaN error.
    if (!width || !height) {
      return;
    }
    const padding = 12;
    const legend = dc.legend()
      .horizontal(true)
      .x(this.CHART_MARGINS.get('left') + padding)
      .y(height - 15)
      .itemHeight(12)
      .autoItemWidth(true)
      .gap(5)
      .legendWidth(width - padding)
      .legendText(d => d.name);

    this._chart.legend(legend);
  },

console.log(startValueGroup.top(1)[0].value);

    lineChart
        .width(230)
        .height(200)
        .dimension(startValue)
        .group(startValueGroup)
        .x(d3.scale.linear().domain([0.5, 5.5]))
        .valueAccessor((d: any) => d.value)
        .renderHorizontalGridLines(true)
        .elasticY(true)
        .xAxis()
            .tickFormat((v: string) => v);

    lineChart.legend(dc.legend().x(200).y(10).itemHeight(13).gap(5));

    rowChart
        .width(340)
        .height(850)
        .dimension(cityDimension)
        .group(cityGroup)
        .renderLabel(true)
        .colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"])
        .colorDomain([0, 0])
        .renderlet((chart: dc.RowChart) => bubbleChart.filter(chart.filter()))
        .on("filtered", (chart: dc.RowChart) =>
            dc.events.trigger(() =>
                bubbleChart.filter(chart.filter())));

    dataTable
        .width(800)

function makePie(elem, w, h, dimension, group) {
  var chart = dc.pieChart(elem);
  chart.width(w)
    .height(h)
    .radius(110)
    .innerRadius(0)
    .dimension(dimension)
    .group(group);
  chart.legend(dc.legend().legendText(function(d) {
    return d.name + ' (' + d.data + ')';
  }).x(0).y(20))
  chart.on('renderlet', function(chart) {
    chart.selectAll('text.pie-slice')
      .attr('transform', function(d) {
        var translate = d3.select(this).attr('transform');
        var ang = ((d.startAngle + d.endAngle) / 2 * 180 / Math.PI) % 360;
        if (ang < 180) ang -= 90;
        else ang += 90;
        return translate + ' rotate(' + ang + ')';
      });
  });
  dc.override(chart, 'legendables', function() {
    var legendables = this._legendables();
    return legendables.filter(function(l) {
      return l.data > 0;

.elasticY(true)
      .xAxis();


    runningChart
      .width(1400)
      .height(250)
      .transitionDuration(500)
      .mouseZoomable(false)
      .margins({
        top: 10,
        right: 10,
        bottom: 20,
        left: 40
      })
      .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
      .renderHorizontalGridLines(true)
      .xUnits(timePeriodUnits)
      .renderlet(function(chart) {
        chart.svg().selectAll('.chart-body').attr('clip-path', null)
      })
      .compose([
        dc.lineChart(runningChart)
        .dimension(timeOpenDimension)
        .colors('red')
        .renderDataPoints({
          radius: 2,
          fillOpacity: 0.8,
          strokeOpacity: 0.8
        })
        .group(runningtotalGroup, "Accumulative Job Count"),
        dc.lineChart(runningChart)

valueChart
            .width(700)
            .height(200)
            .dimension(monthDimension)
            .x(d3.time.scale().domain(dateExtent))
            .xUnits(d3.time.months)
            .elasticY(true)
            .brushOn(false)
            .margins({top: 0, left: 70, right: 70, bottom: 25})
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .yAxisLabel("monthly net amount transacted")
            .rightYAxisLabel("total net amount transacted")
            .rangeChart(volumeChart)
            .legend(dc.legend().x(90).y(0).itemHeight(13).gap(5))
            .compose([amountChart, cumAmountChart]);


        var descCache = {};
        var descReq = new Set([]);

        transactionTable
            .dimension(dateDimension)
            .columns([
                function (d) {
                    return d.amount / 100. + " €";
                },
                function (d) {
                    var format_func = function (acc_id) {
                        return "<span id="\&quot;acc-&quot;"></span>";
                    };