CODEWITHSUNDEEP
javascriptanimationd3.jsc3.js
LeMoussel
LeMoussel

Reputation: 5767

Do not show animations on C3.js Donut chart

I'm having some trouble turning off the animation with C3.js. Is it possible to remove animations when mouse over point on C3.js donut chart?

I have duration set to 0, but it does not work - when mouse over chart, animation is still made.

Example : https://jsfiddle.net/4ff8vnx4/1/

This is my code: 

var chartDonut1 = c3.generate({
  bindto: "#chart1",
  data: {
            type: 'donut',
            json: [
                {"Parfait": 190},
                {"Bien": 120},
                {"Trop court": 32},
                {"Trop long": 22}
            ],
            keys: {
                value: ['Parfait', 'Bien', 'Trop court', 'Trop long']
            },
            names: {
                'Parfait': 'Parfait (entre 50 \340 60 car.)',
                'Bien': 'Bien (entre 40 \340 49 ou  61 \340 69 car.)',
                'Trop court': 'Trop court (inf\351rieur \340 40 car.)',
                'Trop long': 'Trop long (sup\351rieur \340 79 car.)'            
            }
  },
  transition:  {duration: 0}
});

Upvotes: 1

Views: 2197

Answers (2)

LeMoussel
LeMoussel

Reputation: 5767

Partial disable animation with expand option.

donut: {
    expand: false
}

Updated my example: https://jsfiddle.net/4ff8vnx4/7/

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16069

You should take a look at the reference guide of C3.js. What you want is to disable the interaction. You can achieve this by adding the following snippet to the configuration object.

interaction: {
    enabled: false
}

Upvotes: 3

Related Questions