Aligning Multiple Spark Bar Charts

[airik]

In the sample gallery there is a sample showing spark bar chart with weather data. In each case all the bars are left aligned (vertically) to a datum and the captions right aligned to the same datum. How was this achieved? I have 5 charts with different captions and the bars won't align.

 

Is there a way to enter multiple series in the same chart or a way to fix the caption width?

Edited June 26, 2012 by airik

[Guest Sumedh]

In the sample gallery there is a sample showing spark bar chart with weather data. In each case all the bars are left aligned (vertically) to a datum and the captions right aligned to the same datum. How was this achieved? I have 5 charts with different captions and the bars won't align.

 

Is there a way to enter multiple series in the same chart or a way to fix the caption width?

 

Hi,

 

Can you elaborate on your requirement a bit more?

 

Also, adding multiple series in Spark-Column chart is not possible.

 

Awaiting your response.

[airik]

Sure:

 

I've enclosed an image of my non-aligned layout and the sample you show which is nicely aligned

 

I wish to set up multiple spark bar charts so they line up vertically such that each bar has the same width and each series starts and ends under the series above it.

This will require the captions to not shift the start of the series as it is currently doing in my screenshot.

 

 

Hi,

 

Can you elaborate on your requirement a bit more?

 

Also, adding multiple series in Spark-Column chart is not possible.

 

Awaiting your response.

Edited June 27, 2012 by airik

[Guest Sumedh]

Sure:

 

I've enclosed an image of my non-aligned layout and the sample you show which is nicely aligned

 

I wish to set up multiple spark bar charts so they line up vertically such that each bar has the same width and each series starts and ends under the series above it.

This will require the captions to not shift the start of the series as it is currently doing in my screenshot.

 

 

 

 

Hi,

 

You would need to render 4 Spark Column charts in separate 4 divs with equal data-set elements.

 

Please find attached illustration for your reference.

SparkColumn_Chart.zip

[airik]

I understand each must have a separate container and this is much how I setup my code.

Taking what you sent me I can see the columns are not aligned. If I use a larger caption name it becomes more evident (see the attached screen shot)

I want all the bars to line up with each other and preferably when the chart width is set to 100% and re-sizes.

 

To achieve this there would need to be some way to force the width of a caption.

 

Hi,

 

You would need to render 4 Spark Column charts in separate 4 divs with equal data-set elements.

 

Please find attached illustration for your reference.

[Guest Sumedh]

I understand each must have a separate container and this is much how I setup my code.

Taking what you sent me I can see the columns are not aligned. If I use a larger caption name it becomes more evident (see the attached screen shot)

I want all the bars to line up with each other and preferably when the chart width is set to 100% and re-sizes.

 

To achieve this there would need to be some way to force the width of a caption.

 

 

 

Hi,

 

You would need to set leftCanvasMargin attribute under the chart element.

 

Also, you would need to configure the chart dimensions. Set chart width upto 200px.

 

Ref. Code:

<chart ... leftCanvasMargin='100'>

 

Please find attached screen-shot for your reference.

 

Please find attached screen-shot for your reference.