Chart arcs shrink after refresh

Question

I have a donut chart where certain pieces of the donut sticks out. Here is the screen shot.

The orange, red and blue arcs are sticking out and I want them to stick out permanently however when I hover over any of the pieces they shrink and become normal like this.

we are using a timeout function to make the pieces stick out:

setTimeout(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

Here is my FIDDLE

I was wondering if this is a JavaScript issue or how i can possibly change this to make the arcs stick out permanently.

Barnyard

Answer 1

You can call your expandArc function again to reset it on mouseout:

onmouseout: function (d, i) {
  chart.internal.expandArc(['A', 'B', 'D']);
}

Updated fiddle.

var currentSlice;

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['A', 30, 200, 100, 400, 150, 250],
            ['B', 130, 100, 140, 200, 150, 50],
            ['C', 50, 100, 130, 240, 200, 150],
            ['D', 130, 100, 140, 200, 150, 50],
            ['E', 130, 150, 200, 300, 200, 100]
        ],
        type: 'donut',
        onclick: function (e) {
            
        },
        onmouseover: function (d, i) {
        
            
     
            
            
        },
        onmouseout: function (d, i) {
					chart.internal.expandArc(['A', 'B', 'D'])
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d',
                centered: true,
                position: 'inner-right'
            }
        }
    },

    bindto: '#dash',
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }

    },
    pie: {
        expand: true,
    },
    tooltip: {
        grouped: false,
        contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
            //  console.log("Containt");
            // console.log(data, defaultTitleFormat, defaultValueFormat, color);
            return "<p style='border:1px solid red;'>" + data[0].value + "</p>";

        }
    }
});

setTimeout(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

 p {
   line-height: 1;
   font-weight: bold;
   padding: 5px 12px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   border-radius: 4px;
   line-height: 15px;
   font-size: 12px;
   min-width: 91px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<div id="dash"></div>

Theine

Interestingly this doesn't work in StackSnippets (if you hover at the center of the pie chart), but that seems to be a problem with StackSnippets since it obviously works with jsfiddle. – Oneself

I was running into a problem when I edit the snippet and hover in the middle of the doughnut everything would collapse. Now it seems to have morphed into - when I click in the middle of the doughnut. But never mind, alls well that works when running :-) – Oneself

@Theine I had a follow up question from solution you and potatopeelings provided. I am having issue when i use chart.load #37075815 – Barnyard

Answer 2

You can override chart.internal.unexpandArc to not do anything for the sectors you want to keep expanded.

Your setTimeout becomes

setTimeout(function() {
  chart.internal.expandArc(['A', 'B', 'D'])
  var originalUnexpandArc = chart.internal.unexpandArc;
  chart.internal.unexpandArc = function(targetIds) {
    if (typeof targetIds === "string") {
      if (['A', 'B', 'D'].indexOf(targetIds) !== -1) {
        return;
      }
    }
    else {  
      targetIds = targetIds.filter(function(id) { return ['A', 'B', 'D'].indexOf(id) === -1; });
    }
    return originalUnexpandArc.apply(this, [ targetIds ]);
  }
}, 0);

---

Updated fiddle - https://jsfiddle.net/161jdsq9/

Oneself

That said, Mark's solution is much simpler and better. I just posted this because I'd fessed up my original comment by adding an .api when fiddling around with the working solution :-) – Oneself

I actually had a follow up question , I am not sure how to solve this #37075815 – Barnyard

when i use chart.load it is reloading entire chart so the arc expand effect is gone. – Barnyard

If it's not solved, I would suggest moving the setTimeout to the onrendered option (c3js.org/reference.html#onrendered) for the chart (you'd have to change chart.internal to chart.api.internal) – Oneself