assets/img/scatter-chart-multiple-keys.svg

<svg height="600" viewBox="0 0 800 600" width="800" xmlns="http://www.w3.org/2000/svg">
<g class="g-chart">
<g class="g-title" transform="translate(400,40)">
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="24px" text-anchor="middle" x="0" y="0">
Scatter Chart
</text>
</g>
<g class="x-axis" transform="translate(60,550)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1" x1="0" x2="700" y1="0" y2="0"/>
<g class="tick" transform="translate(0,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
0
</text>
</g>
<g class="tick" transform="translate(70,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
20
</text>
</g>
<g class="tick" transform="translate(140,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
40
</text>
</g>
<g class="tick" transform="translate(210.00002,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
60
</text>
</g>
<g class="tick" transform="translate(280,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
80
</text>
</g>
<g class="tick" transform="translate(350,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
100
</text>
</g>
<g class="tick" transform="translate(420.00003,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
120
</text>
</g>
<g class="tick" transform="translate(490,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
140
</text>
</g>
<g class="tick" transform="translate(560,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
160
</text>
</g>
<g class="tick" transform="translate(630,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
180
</text>
</g>
<g class="tick" transform="translate(700,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="0" y1="0" y2="6"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" x="0" y="16">
200
</text>
</g>
<text fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" transform="rotate(0)" x="350" y="42">
Custom Y Axis Label
</text>
</g>
<g class="y-axis" transform="translate(60,90)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1" x1="0" x2="0" y1="0" y2="460"/>
<g class="tick" transform="translate(0,460)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
0
</text>
</g>
<g class="tick" transform="translate(0,414)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
10
</text>
</g>
<g class="tick" transform="translate(0,368)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
20
</text>
</g>
<g class="tick" transform="translate(0,322)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
30
</text>
</g>
<g class="tick" transform="translate(0,276)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
40
</text>
</g>
<g class="tick" transform="translate(0,230)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
50
</text>
</g>
<g class="tick" transform="translate(0,184)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
60
</text>
</g>
<g class="tick" transform="translate(0,138)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
70
</text>
</g>
<g class="tick" transform="translate(0,92)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
80
</text>
</g>
<g class="tick" transform="translate(0,46)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
90
</text>
</g>
<g class="tick" transform="translate(0,0)">
<line shape-rendering="crispEdges" stroke="#bbbbbb" stroke-width="1px" x1="0" x2="-6" y1="0" y2="0"/>
<text dy=".35em" fill="#777" font-family="sans-serif" font-size="14px" text-anchor="end" x="-12" y="0">
100
</text>
</g>
<text fill="#777" font-family="sans-serif" font-size="14px" text-anchor="middle" transform="rotate(-90)" x="-230" y="-42">
Custom X Axis Label
</text>
</g>
<g class="g-view" transform="translate(60,90)">
<g>
<g class="scatter-point" transform="translate(420.00003,46)">
<circle cx="0" cy="0" fill="#1b9e77" r="5"/>
<text dy=".35em" fill="#333" font-family="sans-serif" font-size="14px" text-anchor="start" x="13" y="0">
(120, 90)
</text>
</g>
<g class="scatter-point" transform="translate(42,211.59999)">
<circle cx="0" cy="0" fill="#1b9e77" r="5"/>
<text dy=".35em" fill="#333" font-family="sans-serif" font-size="14px" text-anchor="start" x="13" y="0">
(12, 54)
</text>
</g>
<g class="scatter-point" transform="translate(350,276)">
<circle cx="0" cy="0" fill="#d95f02" r="5"/>
<text dy=".35em" fill="#333" font-family="sans-serif" font-size="14px" text-anchor="start" x="13" y="0">
(100, 40)
</text>
</g>
<g class="scatter-point" transform="translate(630,414)">
<circle cx="0" cy="0" fill="#7570b3" r="5"/>
<text dy=".35em" fill="#333" font-family="sans-serif" font-size="14px" text-anchor="start" x="13" y="0">
(180, 10)
</text>
</g>
</g>
</g>
</g>
</svg>