Sunburst Chart

A sunburst diagram displays a hierarchical structure. The origin of the organization is represented by the center of the circle, and each level of the organization by an aditional ring. The last level (leaves) are located at the extreme outer part of the circle. It is possible to map a numeric value to each leaf of the graphic, in this case their size will be proportional to this value. Sunburst diagrams suffer the same issue than pie or doughnut plot: it is really hard to compare the size of different slices and thus conveys poorly the information. You should probably consider treemap, circular packing or dendrogram.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Color" : ["red","blue","green","grey","red","blue","green","grey","red","blue","green","grey","red","blue","green"],
        "Month" : ["Jan","Feb","Feb","Feb","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
        "Quarter" : ["1st","1st","1st","1st","1st","1st","2nd","2nd","2nd","3rd","3rd","3rd","4th","4th","4th"],
        "Week" : [null,"Week 1","Week 2","Week 3","Week 4",null,null,null,null,null,null,null,null,null,null]
     },
     "y" : {
        "data" : [
          [3.5,1.2,0.8,0.6,0.5,1.7,1.1,0.8,0.3,0.7,0.6,0.1,0.5,0.4,0.3]
        ],
        "smps" : ["Sales1","Sales2","Sales3","Sales4","Sales5","Sales6","Sales7","Sales8","Sales9","Sales10","Sales11","Sales12","Sales13","Sales14","Sales15"],
        "vars" : ["Sales"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "circularArc":"360",
     "circularRotate":"0",
     "circularType":"sunburst",
     "colorBy":"Quarter",
     "colorScheme":"Bootstrap",
     "graphType":"Circular",
     "hierarchy":[
        "Quarter",
        "Month",
        "Week"
     ],
     "objectBorderColor":"rgb(0,0,0)",
     "showTransition":"false",
     "title":"Simple Sunburst"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-sunburst-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-sunburst-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  circularArc=360,
  circularRotate=0,
  circularType="sunburst",
  colorBy="Quarter",
  colorScheme="Bootstrap",
  graphType="Circular",
  hierarchy=list("Quarter", "Month", "Week"),
  objectBorderColor="rgb(0,0,0)",
  showTransition=FALSE,
  title="Simple Sunburst"
)