Serial Chart Stacking

[Pikey4]

Hi,

I need to alter this column chart so that the seperate columns are side by side instead of over top of each other as it is difficult to see one of the series due to it mostly being behind. I tried a few things but could't get a result.

Screenshot

The code is below, any guidance would be very greatfull.

Thanks in advance!

<md-card>
    <md-toolbar class="md-whiteframe-1dp md-hue-1">
		<div class="md-toolbar-tools">
			<h2 flex>
				<span>Hot Water System & Hot Water Gas</span>
			</h2>
		</div>
	</md-toolbar>
    <md-card-content>
        <ma-serial-chart points="[hws1WaterPoint, hotWaterSystemGasPoint, hws1WaterPointDelta, hotWaterSystemGasPointDelta]" series-1-values="hotWaterValues" series-2-values="hotWaterGasValues" style="height: 400px; width: 100%" series-1-color="#ff4d4d" series-1-axis="left" series-2-color="#e6e600" series-2-axis="right" default-type="column" legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" options="{valueAxes:[{title: 'Hot Water - (Kl)', titleColor: '#ff4d4d'}, {title: 'Hot Water Gas - (m³)', titleColor: '#e6e600'}]}"></ma-serial-chart>
    </md-card-content>
</md-card>

[Jared Wiltshire]

hey @Pikey4 try these options

graph-options="[{clustered: true},{clustered: true}]" 

or

 series-1-graph-options="{clustered: true}" series-2-graph-options="{clustered: true}"

[Pikey4]

Thanks Jared,

Option 1 worked a treat.

Cheers!