Interactive Two-Level Donut Chart

Donut charts, also known as ring charts, provide an engaging way to visualize data proportions. They are particularly effective when showcasing a single data series, highlighting key segments within a whole. The hole in the center helps distinguish segments and avoids visual clutter, making it easy to compare percentages. Consider using donut charts when you need to show parts of a whole, such as market share, survey results, or budget allocation. Their visual appeal attracts attention, improving data comprehension and making presentations more impactful. Remember to label segments clearly for easy understanding and accurate interpretation.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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" : "RdYlBu",
         "graphType" : "Circular",
         "hierarchy" : ["Quarter","Month"],
         "objectBorderColor" : "rgb(0,0,0)",
         "showTransition" : false,
         "title" : "Donnut with two levels",
         "transitionStep" : 50,
         "transitionTime" : 1500,
         "xAxis" : ["Sales"]
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/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/r/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="RdYlBu",
  graphType="Circular",
  hierarchy=list("Quarter", "Month"),
  objectBorderColor="rgb(0,0,0)",
  showTransition=FALSE,
  title="Donnut with two levels",
  transitionStep=50,
  transitionTime=1500,
  xAxis=list("Sales")
)