How to create annotation for sunburst ? about d2b

[kevinwarne]

Hey,

There are some current capabilities with d2b to add sunburst labels and disable click zooming. Here is a fiddle that uses that functionality. https://jsfiddle.net/3cyeddyp/

Right now the annotations are limited to the axis chart components (e.g. bar, line, area, scatter, ..). I would like to add built in annotation hooks to the other charts, but I'm still considering how this should be done. The main issue is that the annotations are rendered in SVG, so a large chart padding would need to be added around the sunburst to allow room for the annotations. This might make it a bit unusable for mobile devices, so an extra configuration would need to be added to disable annotations and padding given some mobile threshold.

This is definitely something I'd like to add in the near future though so stay tuned. Thanks for checking out d2b 👍.

[Seraf]

Ohh, that's awesome, thanks for the quick answer ! I agree, the annotations may lead to weird behavior on mobile/small screens.
But without the annotations, the label are really hard to read IMHO. Let me know if you need some tests/ideas ;-)

Also, I have another question : is it possible to not have the root displayed ? I mean not having a root node displayed, but directly few nodes on the same level ?

[Seraf]

About the label/zoom, I already tried to modify these config, but I didn't succeed.
I'm using the vue integration, and set this in my data

chartConfig: function (chart) {
        chart.show_labels(true),
        chart.zoomable(false)
      },

But it looks like I'm not able to access these attributes (if I set them with chart.zoomable = false I haven't errors, but it doesn't work)

[kevinwarne]

Ah, you are using Vue. Here is the updated fiddle with Vue integration: https://jsfiddle.net/3cyeddyp/3/

There is extra configuration in there for doing other things with the sunburst (like hiding the root node, and eliminating the donut). Go ahead and play around with it to see what you need.

The main thing with your snippet is that you need to access chart.sunburst() which returns the internal d2b.svgSunburst rather than d2b.chartSunburst. This has the showLabels and zoomable configurations.

chartConfig: function (chart) {
  chart.sunburst()
    .showLabels(true),
    .zoomable(false)
},

[kevinwarne]

One other thing, if you are looking to hide the breadcrumbs there is configuration for that in this fiddle: https://jsfiddle.net/3cyeddyp/4/

[Seraf]

Thanks a lot for your quick and detailed answers ! :)