dc/welcome.md

A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js

# dc.js

Welcome to the dc.js documentation.

The entire library is scoped under {@link dc the dc namespace}. Its child namespaces contain utilities.

A class diagram is shown below - mixins are blue and chart classes are green. (Relations between mixins are somewhat subjective.)


<!-- Title: dcHierarchy Pages: 1 -->
<svg width="571pt" height="572pt"
 viewBox="0.00 0.00 571.08 572.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 568)">
<title>dcHierarchy</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-568 567.075,-568 567.075,4 -4,4"/>
<!-- baseMixin -->
<g id="node1" class="node"><title>baseMixin</title>
<g id="a_node1"><a xlink:href="dc.baseMixin.html" xlink:title="baseMixin">
<ellipse fill="lightblue" stroke="black" cx="30.6108" cy="-234" rx="30.7221" ry="18"/>
<text text-anchor="middle" x="30.6108" y="-231" font-family="sans-serif" font-size="10.00">baseMixin</text>
</a>
</g>
</g>
<!-- colorMixin -->
<g id="node2" class="node"><title>colorMixin</title>
<g id="a_node2"><a xlink:href="dc.colorMixin.html" xlink:title="colorMixin">
<ellipse fill="lightblue" stroke="black" cx="140.346" cy="-342" rx="30.7108" ry="18"/>
<text text-anchor="middle" x="140.346" y="-339" font-family="sans-serif" font-size="10.00">colorMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;colorMixin -->
<g id="edge15" class="edge"><title>baseMixin&#45;&gt;colorMixin</title>
<path fill="none" stroke="black" d="M42.8162,-250.835C54.904,-268.206 75.3749,-295.45 97.2217,-315 100.835,-318.233 104.874,-321.34 108.983,-324.222"/>
<polygon fill="black" stroke="black" points="107.128,-327.191 117.399,-329.789 110.99,-321.353 107.128,-327.191"/>
</g>
<!-- marginMixin -->
<g id="node3" class="node"><title>marginMixin</title>
<g id="a_node3"><a xlink:href="dc.marginMixin.html" xlink:title="marginMixin">
<ellipse fill="lightblue" stroke="black" cx="140.346" cy="-396" rx="35.9791" ry="18"/>
<text text-anchor="middle" x="140.346" y="-393" font-family="sans-serif" font-size="10.00">marginMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;marginMixin -->
<g id="edge17" class="edge"><title>baseMixin&#45;&gt;marginMixin</title>
<path fill="none" stroke="black" d="M36.8452,-251.977C45.6267,-279.687 65.5412,-333.356 97.2217,-369 99.8726,-371.983 102.929,-374.764 106.159,-377.321"/>
<polygon fill="black" stroke="black" points="104.24,-380.251 114.416,-383.199 108.299,-374.548 104.24,-380.251"/>
</g>
<!-- bubbleMixin -->
<g id="node4" class="node"><title>bubbleMixin</title>
<g id="a_node4"><a xlink:href="dc.bubbleMixin.html" xlink:title="bubbleMixin">
<ellipse fill="lightblue" stroke="black" cx="140.346" cy="-500" rx="35.3575" ry="18"/>
<text text-anchor="middle" x="140.346" y="-497" font-family="sans-serif" font-size="10.00">bubbleMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;bubbleMixin -->
<g id="edge8" class="edge"><title>baseMixin&#45;&gt;bubbleMixin</title>
<path fill="none" stroke="black" d="M36.7161,-251.835C46.6777,-285.811 70.1192,-361.878 97.2217,-423 104.923,-440.369 115.116,-459.085 123.546,-473.715"/>
<polygon fill="black" stroke="black" points="120.72,-475.816 128.787,-482.684 126.763,-472.285 120.72,-475.816"/>
</g>
<!-- capMixin -->
<g id="node7" class="node"><title>capMixin</title>
<g id="a_node7"><a xlink:href="dc.capMixin.html" xlink:title="capMixin">
<ellipse fill="lightblue" stroke="black" cx="140.346" cy="-288" rx="27.3002" ry="18"/>
<text text-anchor="middle" x="140.346" y="-285" font-family="sans-serif" font-size="10.00">capMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;capMixin -->
<g id="edge23" class="edge"><title>baseMixin&#45;&gt;capMixin</title>
<path fill="none" stroke="black" d="M54.4588,-245.452C70.3021,-253.393 91.576,-264.056 108.863,-272.721"/>
<polygon fill="black" stroke="black" points="107.489,-275.947 117.997,-277.299 110.625,-269.689 107.489,-275.947"/>
</g>
<!-- dataCount -->
<g id="node14" class="node"><title>dataCount</title>
<g id="a_node14"><a xlink:href="dc.dataCount.html" xlink:title="dataCount">
<ellipse fill="lightgreen" stroke="black" cx="140.346" cy="-234" rx="31.0259" ry="18"/>
<text text-anchor="middle" x="140.346" y="-231" font-family="sans-serif" font-size="10.00">dataCount</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataCount -->
<g id="edge12" class="edge"><title>baseMixin&#45;&gt;dataCount</title>
<path fill="none" stroke="black" d="M61.3353,-234C72.9161,-234 86.374,-234 98.8184,-234"/>
<polygon fill="black" stroke="black" points="98.9698,-237.5 108.97,-234 98.9697,-230.5 98.9698,-237.5"/>
</g>
<!-- dataGrid -->
<g id="node15" class="node"><title>dataGrid</title>
<g id="a_node15"><a xlink:href="dc.dataGrid.html" xlink:title="dataGrid">
<ellipse fill="lightgreen" stroke="black" cx="140.346" cy="-180" rx="27" ry="18"/>
<text text-anchor="middle" x="140.346" y="-177" font-family="sans-serif" font-size="10.00">dataGrid</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataGrid -->
<g id="edge13" class="edge"><title>baseMixin&#45;&gt;dataGrid</title>
<path fill="none" stroke="black" d="M54.4588,-222.548C70.4063,-214.555 91.8562,-203.803 109.204,-195.108"/>
<polygon fill="black" stroke="black" points="110.987,-198.13 118.358,-190.52 107.85,-191.872 110.987,-198.13"/>
</g>
<!-- dataTable -->
<g id="node16" class="node"><title>dataTable</title>
<g id="a_node16"><a xlink:href="dc.dataTable.html" xlink:title="dataTable">
<ellipse fill="lightgreen" stroke="black" cx="140.346" cy="-126" rx="29.8168" ry="18"/>
<text text-anchor="middle" x="140.346" y="-123" font-family="sans-serif" font-size="10.00">dataTable</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataTable -->
<g id="edge14" class="edge"><title>baseMixin&#45;&gt;dataTable</title>
<path fill="none" stroke="black" d="M42.8162,-217.165C54.904,-199.794 75.3749,-172.55 97.2217,-153 100.911,-149.698 105.046,-146.528 109.245,-143.595"/>
<polygon fill="black" stroke="black" points="111.406,-146.363 117.833,-137.94 107.556,-140.517 111.406,-146.363"/>
</g>
<!-- numberDisplay -->
<g id="node20" class="node"><title>numberDisplay</title>
<g id="a_node20"><a xlink:href="dc.numberDisplay.html" xlink:title="numberDisplay">
<ellipse fill="lightgreen" stroke="black" cx="140.346" cy="-72" rx="43.25" ry="18"/>
<text text-anchor="middle" x="140.346" y="-69" font-family="sans-serif" font-size="10.00">numberDisplay</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;numberDisplay -->
<g id="edge21" class="edge"><title>baseMixin&#45;&gt;numberDisplay</title>
<path fill="none" stroke="black" d="M36.8452,-216.023C45.6267,-188.313 65.5412,-134.644 97.2217,-99 99.4146,-96.5328 101.885,-94.2031 104.501,-92.0245"/>
<polygon fill="black" stroke="black" points="106.725,-94.7322 112.66,-85.9554 102.548,-89.1156 106.725,-94.7322"/>
</g>
<!-- selectMenu -->
<g id="node24" class="node"><title>selectMenu</title>
<g id="a_node24"><a xlink:href="dc.selectMenu.html" xlink:title="selectMenu">
<ellipse fill="lightgreen" stroke="black" cx="140.346" cy="-18" rx="34.2869" ry="18"/>
<text text-anchor="middle" x="140.346" y="-15" font-family="sans-serif" font-size="10.00">selectMenu</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;selectMenu -->
<g id="edge29" class="edge"><title>baseMixin&#45;&gt;selectMenu</title>
<path fill="none" stroke="black" d="M33.87,-215.982C39.1734,-180.011 55.2967,-98.1946 97.2217,-45 99.7506,-41.7913 102.772,-38.8504 106.02,-36.187"/>
<polygon fill="black" stroke="black" points="108.34,-38.8295 114.407,-30.1441 104.248,-33.15 108.34,-38.8295"/>
</g>
<!-- coordinateGridMixin -->
<g id="node5" class="node"><title>coordinateGridMixin</title>
<g id="a_node5"><a xlink:href="dc.coordinateGridMixin.html" xlink:title="coordinateGridMixin">
<ellipse fill="lightblue" stroke="black" cx="276.085" cy="-396" rx="55.9203" ry="18"/>
<text text-anchor="middle" x="276.085" y="-393" font-family="sans-serif" font-size="10.00">coordinateGridMixin</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;coordinateGridMixin -->
<g id="edge1" class="edge"><title>colorMixin&#45;&gt;coordinateGridMixin</title>
<path fill="none" stroke="black" d="M166.188,-352.03C184.416,-359.39 209.649,-369.579 231.236,-378.295"/>
<polygon fill="black" stroke="black" points="229.963,-381.555 240.546,-382.054 232.584,-375.064 229.963,-381.555"/>
</g>
<!-- geoChoroplethChart -->
<g id="node17" class="node"><title>geoChoroplethChart</title>
<g id="a_node17"><a xlink:href="dc.geoChoroplethChart.html" xlink:title="geoChoroplethChart">
<ellipse fill="lightgreen" stroke="black" cx="276.085" cy="-288" rx="56.7285" ry="18"/>
<text text-anchor="middle" x="276.085" y="-285" font-family="sans-serif" font-size="10.00">geoChoroplethChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;geoChoroplethChart -->
<g id="edge16" class="edge"><title>colorMixin&#45;&gt;geoChoroplethChart</title>
<path fill="none" stroke="black" d="M166.188,-331.97C184.35,-324.637 209.467,-314.495 231.002,-305.8"/>
<polygon fill="black" stroke="black" points="232.331,-309.038 240.293,-302.048 229.71,-302.547 232.331,-309.038"/>
</g>
<!-- heatMap -->
<g id="node18" class="node"><title>heatMap</title>
<g id="a_node18"><a xlink:href="dc.heatMap.html" xlink:title="heatMap">
<ellipse fill="lightgreen" stroke="black" cx="276.085" cy="-450" rx="27.1742" ry="18"/>
<text text-anchor="middle" x="276.085" y="-447" font-family="sans-serif" font-size="10.00">heatMap</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;heatMap -->
<g id="edge19" class="edge"><title>colorMixin&#45;&gt;heatMap</title>
<path fill="none" stroke="black" d="M163.605,-353.879C170.419,-358.118 177.646,-363.278 183.471,-369 204.05,-389.212 197.736,-404.037 219.471,-423 226.214,-428.883 234.464,-433.798 242.524,-437.751"/>
<polygon fill="black" stroke="black" points="241.243,-441.013 251.797,-441.951 244.131,-434.637 241.243,-441.013"/>
</g>
<!-- pieChart -->
<g id="node21" class="node"><title>pieChart</title>
<g id="a_node21"><a xlink:href="dc.pieChart.html" xlink:title="pieChart">
<ellipse fill="lightgreen" stroke="black" cx="276.085" cy="-234" rx="27" ry="18"/>
<text text-anchor="middle" x="276.085" y="-231" font-family="sans-serif" font-size="10.00">pieChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;pieChart -->
<g id="edge22" class="edge"><title>colorMixin&#45;&gt;pieChart</title>
<path fill="none" stroke="black" d="M163.605,-330.121C170.419,-325.882 177.646,-320.722 183.471,-315 204.05,-294.788 197.736,-279.963 219.471,-261 226.214,-255.117 234.464,-250.202 242.524,-246.249"/>
<polygon fill="black" stroke="black" points="244.131,-249.363 251.797,-242.049 241.243,-242.987 244.131,-249.363"/>
</g>
<!-- rowChart -->
<g id="node22" class="node"><title>rowChart</title>
<g id="a_node22"><a xlink:href="dc.rowChart.html" xlink:title="rowChart">
<ellipse fill="lightgreen" stroke="black" cx="276.085" cy="-342" rx="28.0797" ry="18"/>
<text text-anchor="middle" x="276.085" y="-339" font-family="sans-serif" font-size="10.00">rowChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;rowChart -->
<g id="edge27" class="edge"><title>colorMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M171.027,-342C190.645,-342 216.525,-342 237.567,-342"/>
<polygon fill="black" stroke="black" points="237.764,-345.5 247.764,-342 237.764,-338.5 237.764,-345.5"/>
</g>
<!-- marginMixin&#45;&gt;coordinateGridMixin -->
<g id="edge2" class="edge"><title>marginMixin&#45;&gt;coordinateGridMixin</title>
<path fill="none" stroke="black" d="M176.136,-396C186.492,-396 198.193,-396 209.829,-396"/>
<polygon fill="black" stroke="black" points="210.002,-399.5 220.002,-396 210.002,-392.5 210.002,-399.5"/>
</g>
<!-- marginMixin&#45;&gt;heatMap -->
<g id="edge18" class="edge"><title>marginMixin&#45;&gt;heatMap</title>
<path fill="none" stroke="black" d="M168.733,-407.058C190.302,-415.767 220.408,-427.923 243.086,-437.079"/>
<polygon fill="black" stroke="black" points="242.03,-440.428 252.613,-440.926 244.651,-433.937 242.03,-440.428"/>
</g>
<!-- marginMixin&#45;&gt;rowChart -->
<g id="edge26" class="edge"><title>marginMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M168.733,-384.942C190.035,-376.341 219.666,-364.377 242.242,-355.261"/>
<polygon fill="black" stroke="black" points="243.789,-358.411 251.752,-351.422 241.169,-351.92 243.789,-358.411"/>
</g>
<!-- bubbleChart -->
<g id="node10" class="node"><title>bubbleChart</title>
<g id="a_node10"><a xlink:href="dc.bubbleChart.html" xlink:title="bubbleChart">
<ellipse fill="lightgreen" stroke="black" cx="413.75" cy="-502" rx="36.1486" ry="18"/>
<text text-anchor="middle" x="413.75" y="-499" font-family="sans-serif" font-size="10.00">bubbleChart</text>
</a>
</g>
</g>
<!-- bubbleMixin&#45;&gt;bubbleChart -->
<g id="edge7" class="edge"><title>bubbleMixin&#45;&gt;bubbleChart</title>
<path fill="none" stroke="black" d="M175.996,-500.255C224.628,-500.614 313.207,-501.266 367.144,-501.664"/>
<polygon fill="black" stroke="black" points="367.422,-505.166 377.447,-501.74 367.474,-498.166 367.422,-505.166"/>
</g>
<!-- bubbleOverlay -->
<g id="node11" class="node"><title>bubbleOverlay</title>
<g id="a_node11"><a xlink:href="dc.bubbleOverlay.html" xlink:title="bubbleOverlay">
<ellipse fill="lightgreen" stroke="black" cx="276.085" cy="-546" rx="41.696" ry="18"/>
<text text-anchor="middle" x="276.085" y="-543" font-family="sans-serif" font-size="10.00">bubbleOverlay</text>
</a>
</g>
</g>
<!-- bubbleMixin&#45;&gt;bubbleOverlay -->
<g id="edge9" class="edge"><title>bubbleMixin&#45;&gt;bubbleOverlay</title>
<path fill="none" stroke="black" d="M170.037,-509.868C188.373,-516.175 212.47,-524.463 232.958,-531.51"/>
<polygon fill="black" stroke="black" points="232.091,-534.913 242.686,-534.856 234.368,-528.294 232.091,-534.913"/>
</g>
<!-- stackMixin -->
<g id="node6" class="node"><title>stackMixin</title>
<g id="a_node6"><a xlink:href="dc.stackMixin.html" xlink:title="stackMixin">
<ellipse fill="lightblue" stroke="black" cx="413.75" cy="-286" rx="31.6332" ry="18"/>
<text text-anchor="middle" x="413.75" y="-283" font-family="sans-serif" font-size="10.00">stackMixin</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;stackMixin -->
<g id="edge3" class="edge"><title>coordinateGridMixin&#45;&gt;stackMixin</title>
<path fill="none" stroke="black" d="M312.727,-382.306C319.798,-378.63 326.839,-374.2 332.7,-369 354.832,-349.363 347.554,-333.696 368.7,-313 372.372,-309.406 376.606,-306.069 380.967,-303.053"/>
<polygon fill="black" stroke="black" points="382.853,-306.001 389.394,-297.667 379.083,-300.103 382.853,-306.001"/>
</g>
<!-- boxPlot -->
<g id="node9" class="node"><title>boxPlot</title>
<g id="a_node9"><a xlink:href="dc.boxPlot.html" xlink:title="boxPlot">
<ellipse fill="lightgreen" stroke="black" cx="413.75" cy="-448" rx="27" ry="18"/>
<text text-anchor="middle" x="413.75" y="-445" font-family="sans-serif" font-size="10.00">boxPlot</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;boxPlot -->
<g id="edge5" class="edge"><title>coordinateGridMixin&#45;&gt;boxPlot</title>
<path fill="none" stroke="black" d="M312.73,-409.662C333.644,-417.679 359.873,-427.732 380.224,-435.533"/>
<polygon fill="black" stroke="black" points="379.103,-438.851 389.693,-439.162 381.608,-432.315 379.103,-438.851"/>
</g>
<!-- coordinateGridMixin&#45;&gt;bubbleChart -->
<g id="edge6" class="edge"><title>coordinateGridMixin&#45;&gt;bubbleChart</title>
<path fill="none" stroke="black" d="M312.592,-409.849C319.672,-413.515 326.751,-417.901 332.7,-423 354.042,-441.293 348.278,-455.685 368.7,-475 371.852,-477.982 375.386,-480.801 379.045,-483.412"/>
<polygon fill="black" stroke="black" points="377.411,-486.527 387.688,-489.107 381.263,-480.682 377.411,-486.527"/>
</g>
<!-- compositeChart -->
<g id="node12" class="node"><title>compositeChart</title>
<g id="a_node12"><a xlink:href="dc.compositeChart.html" xlink:title="compositeChart">
<ellipse fill="lightgreen" stroke="black" cx="413.75" cy="-394" rx="45.1005" ry="18"/>
<text text-anchor="middle" x="413.75" y="-391" font-family="sans-serif" font-size="10.00">compositeChart</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;compositeChart -->
<g id="edge10" class="edge"><title>coordinateGridMixin&#45;&gt;compositeChart</title>
<path fill="none" stroke="black" d="M332.265,-395.187C340.818,-395.06 349.65,-394.93 358.189,-394.804"/>
<polygon fill="black" stroke="black" points="358.475,-398.301 368.422,-394.653 358.372,-391.301 358.475,-398.301"/>
</g>
<!-- scatterPlot -->
<g id="node23" class="node"><title>scatterPlot</title>
<g id="a_node23"><a xlink:href="dc.scatterPlot.html" xlink:title="scatterPlot">
<ellipse fill="lightgreen" stroke="black" cx="413.75" cy="-340" rx="31.7874" ry="18"/>
<text text-anchor="middle" x="413.75" y="-337" font-family="sans-serif" font-size="10.00">scatterPlot</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;scatterPlot -->
<g id="edge28" class="edge"><title>coordinateGridMixin&#45;&gt;scatterPlot</title>
<path fill="none" stroke="black" d="M311.319,-381.869C331.784,-373.421 357.707,-362.721 378.223,-354.252"/>
<polygon fill="black" stroke="black" points="379.613,-357.465 387.521,-350.414 376.942,-350.995 379.613,-357.465"/>
</g>
<!-- barChart -->
<g id="node8" class="node"><title>barChart</title>
<g id="a_node8"><a xlink:href="dc.barChart.html" xlink:title="barChart">
<ellipse fill="lightgreen" stroke="black" cx="528.938" cy="-313" rx="27.1629" ry="18"/>
<text text-anchor="middle" x="528.938" y="-310" font-family="sans-serif" font-size="10.00">barChart</text>
</a>
</g>
</g>
<!-- stackMixin&#45;&gt;barChart -->
<g id="edge4" class="edge"><title>stackMixin&#45;&gt;barChart</title>
<path fill="none" stroke="black" d="M443.02,-292.744C458.167,-296.357 476.962,-300.84 493.015,-304.67"/>
<polygon fill="black" stroke="black" points="492.564,-308.16 503.104,-307.076 494.189,-301.351 492.564,-308.16"/>
</g>
<!-- lineChart -->
<g id="node19" class="node"><title>lineChart</title>
<g id="a_node19"><a xlink:href="dc.lineChart.html" xlink:title="lineChart">
<ellipse fill="lightgreen" stroke="black" cx="528.938" cy="-259" rx="27.95" ry="18"/>
<text text-anchor="middle" x="528.938" y="-256" font-family="sans-serif" font-size="10.00">lineChart</text>
</a>
</g>
</g>
<!-- stackMixin&#45;&gt;lineChart -->
<g id="edge20" class="edge"><title>stackMixin&#45;&gt;lineChart</title>
<path fill="none" stroke="black" d="M443.02,-279.256C458.06,-275.669 476.695,-271.223 492.673,-267.412"/>
<polygon fill="black" stroke="black" points="493.81,-270.739 502.725,-265.014 492.186,-263.93 493.81,-270.739"/>
</g>
<!-- capMixin&#45;&gt;pieChart -->
<g id="edge24" class="edge"><title>capMixin&#45;&gt;pieChart</title>
<path fill="none" stroke="black" d="M164.033,-278.84C185.648,-270.112 218.411,-256.883 242.755,-247.054"/>
<polygon fill="black" stroke="black" points="244.325,-250.195 252.287,-243.205 241.704,-243.704 244.325,-250.195"/>
</g>
<!-- capMixin&#45;&gt;rowChart -->
<g id="edge25" class="edge"><title>capMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M164.033,-297.16C185.517,-305.835 218.014,-318.956 242.312,-328.767"/>
<polygon fill="black" stroke="black" points="241.255,-332.115 251.838,-332.613 243.875,-325.624 241.255,-332.115"/>
</g>
<!-- seriesChart -->
<g id="node13" class="node"><title>seriesChart</title>
<g id="a_node13"><a xlink:href="dc.seriesChart.html" xlink:title="seriesChart">
<ellipse fill="lightgreen" stroke="black" cx="528.938" cy="-394" rx="34.2756" ry="18"/>
<text text-anchor="middle" x="528.938" y="-391" font-family="sans-serif" font-size="10.00">seriesChart</text>
</a>
</g>
</g>
<!-- compositeChart&#45;&gt;seriesChart -->
<g id="edge11" class="edge"><title>compositeChart&#45;&gt;seriesChart</title>
<path fill="none" stroke="black" d="M458.835,-394C467.308,-394 476.175,-394 484.623,-394"/>
<polygon fill="black" stroke="black" points="484.666,-397.5 494.666,-394 484.666,-390.5 484.666,-397.5"/>
</g>
</g>
</svg>