CODEWITHSUNDEEP
javascriptdc.js
Arindam Barman
Arindam Barman

Reputation: 107

Does yAxis().tickFomat does not work for composite charts on dcjs?

I have this code which throws up error if I use yAxis() ticks or tick formatting. 

      revSpendCompositeChart
        .width(400).height(180)
        .elasticX(true)
        .transitionDuration(1000)
        .dimension(dateDim)
        .elasticY(true)
        .zoomOutRestrict(true)
        .x(d3.time.scale().domain([minDate,maxDate]))
        .renderHorizontalGridLines(true)
        .compose([
            dc.lineChart(revSpendCompositeChart)
                .dimension(dateDim)
                .colors('orange')
                .group(spendDateGroup, "Spend"),
            dc.lineChart(revSpendCompositeChart)
                .dimension(dateDim)
                .colors('green')
                .group(revenueDateGroup, "Revenue")
        ])
        .brushOn(false);

However this throws up error as undefined function.

       revSpendCompositeChart
        .width(400).height(180)
        .elasticX(true)
        .transitionDuration(1000)
        .dimension(dateDim)
        .elasticY(true)
        .zoomOutRestrict(true)
        .x(d3.time.scale().domain([minDate,maxDate]))
        .yAxis().tickFormat(function (v) {
                    return v + '%';
         })
        .renderHorizontalGridLines(true)
        .compose([
            dc.lineChart(revSpendCompositeChart)
                .dimension(dateDim)
                .colors('orange')
                .group(spendDateGroup, "Spend"),
            dc.lineChart(revSpendCompositeChart)
                .dimension(dateDim)
                .colors('green')
                .group(revenueDateGroup, "Revenue")
        ])
        .brushOn(false);

The documentation does not tell anything about the this. But I found that yAxis() function is supported for line charts. So since my composite chart is for two line charts I need to make it work.

Upvotes: 0

Views: 305

Answers (1)

Gordon
Gordon

Reputation: 20120

Although most dc.js methods chain, some do not chain to the same object. xAxis returns a d3 axis object which is not the chart. If you access the axis objects of a chart, do it last or do it in a separate line:

var chart = dc.barChart(...).this(...).that(...);
var xAxis = chart.xAxis().tickFormat(...).ticks(...);
var yAxis = chart.yAxis().tickFormat(...).ticks(...);

https://github.com/dc-js/dc.js/wiki/FAQ#why-does-everything-break-after-a-call-to-xaxis-or-yaxis

Upvotes: 1

Related Questions