Documentation

Report Edit

Stacked Line Chart

This example shows how to create a stacked line chart.

0501001502002503003504000100200300400500600700800
Line 1
Line 2
Line 3
<div class="widgets" controller={PageController}>
   <Svg style="width:600px; height:400px;">
      <Chart offset="20 -10 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
         <Gridlines/>
         <LineGraph name="Line 1" data-bind="$page.points" colorIndex={0} area-bind="$page.stack" yField="y1" active-bind="$page.line1" stacked-bind="$page.stack" />
         <LineGraph name="Line 2" data-bind="$page.points" colorIndex={5} area-bind="$page.stack" yField="y2" active-bind="$page.line2" stacked-bind="$page.stack" />
         <LineGraph name="Line 3" data-bind="$page.points" colorIndex={10} area-bind="$page.stack" yField="y3" active-bind="$page.line3" stacked-bind="$page.stack" />
      </Chart>
   </Svg>
   <Legend />
   <Checkbox value-bind="$page.stack">Stack</Checkbox>
</div>
Copied!Cx Fiddle