CODEWITHSUNDEEP
angularjsd3.jsnvd3.jsangularjs-nvd3-directives
DeclanMcD
DeclanMcD

Reputation: 1586

How to change the transition for angularjs-nvd3-directives charts

I am using angularjs-nvd3-directives to create some pie charts and stacked bar charts and was wondering how to change the transition duration or even the type, but the duration is the one I'm primarily looking to adjust.

Here is my code:

<nvd3-multi-bar-horizontal-chart 
                    data="stackedData"
                    id="stackedExample2"
                    showvalues="true"
                    valueformat="valueFormatFunction()"
                    showlegend="true"
                    tooltips="true"
                    showlabels="true"
                    stacked="true"
                    color="colourFunction()"
                    legendcolor="colourFunction()"
                    showxaxis="true"
                    showyaxis="true"
                    x="xFunctionBar()"
                    showcontrols="false"
                    interactive="true"
                    margin="{left:100}"
                    transitionduration="1000">
                    <svg></svg>
                </nvd3-multi-bar-horizontal-chart>

The transitionduration only affects the initial load of the graph, but when the data changes and the chart is re-drawn the bars or pie slices transition to the new values too quickly. I would like to be able to slow this down and alter the transition type if possible. It currently defaults to transitioning from top left to bottom right - which is fine for a slow chart load but the transitions look terrible.

I have tried delay="500" but that doesn't seem to do anything. Am I missing something here?

Upvotes: 2

Views: 1455

Answers (2)

Vaibhav Pachauri
Vaibhav Pachauri

Reputation: 2671

There is a property named 'duration'. 

$scope.options = {
            chart: {
                type: 'multiBarHorizontalChart',
                height: 450,
                x: function(d){return d.label;},
                y: function(d){return d.value;},
                showControls: true,
                showValues: true,
                duration: 500,
                xAxis: {
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Values',
                    tickFormat: function(d){
                        return d3.format(',.2f')(d);
                    }
                }
            }
        };

In your options object, provide the duration object. That should work. Please have a look at the plnkr.

Do let me know in case you have any issue.

Upvotes: 0

fin
fin

Reputation: 1303

Would selecting it from the DOM and adding the duration work?

d3.select("#chart").duration(300);

Upvotes: 1

Related Questions