How to align vertical guides between line and bar charts in ZingChart?

Question

With the Update of ColdFusion 9 to ColdFusion 11 the underlying chart engine changed from WebCharts3D to ZingCharts. While I managed to find solutions for most of the incompatibilities between the two libraries and their implementation within the <cfchart> tag, I'm struggling to sort out an alignment problem which didn't occur in ColdFusion 9. I even didn't find a fix trying pure javascript and HTML.

In WebCharts3D guides and ticks are centered within a bar in a bar chart. Combined line and bar chart have guides going to the center of the bar and through the markers of the line chart. This is exact the same behaviour as in line charts.

In ZingCharts the guides and ticks of a combined chart or a bar chart sits left to the bar and do not go through the markers of the line. This is a different behaviour than in line-only charts. The x-axis labels are perfectly centered in both engines, tho.

You can see an example here: http://jsfiddle.net/yo3uta96/

Problem:

I have none-public pages with statistical weather data showing rain, wind, temperature etc. which are represented in a number of charts one below each other. Some of them are line charts, some of them are bar charts and some of them are combined charts. This is a dynamically created page where users can select a date range up to 365 days in the past. Every chart on the page has the same number of datapoints. When there are more than 80 datapoints to show, then bar charts turn into area charts, line chart into line charts without markers.

What I want to achieve:

I want to have the charts, datapoints, guides and ticks lined up the same way as x-axis labels do.

What I tried:

I managed to line up datapoints by adding offsetStart and offsetEnd to line-only charts, this is necesseary because in a combined chart the first marker of a line chart is placed centered to the corresponding first bar and does no longer sit on the y-axis as in line charts. The same goes for the last marker.

Unfortunately, adding an offset does not solve my alignment problem with ticks and guides. I tried nearly every possible combination with guides, minorTicks, minorGuides and offsets to no avail. In an ideal world and some edgecases where every x-axis label is shown on the chart, disabling guides and setting minor ticks to 1 might work. But this method stops working when increasing the number of datapoints.

Question:

How can I line up guides and ticks in bar charts and line charts with the same number of datapoints in the same way ZingCharts handles x-axis labels which seem to be perfectly aligned across charts?

Hartwig

I am curious if it is supported too. Had a quick look around and did see a change note in a very old version, that mentioned an alignment attribute ("center" or "node"). It did not seem to have any affect, suggesting it may have been deprecated. (EDIT): Never mind about the minor ticks. Missed your note that those stop working when datapoints increase. jsfiddle.net/yo3uta96/2 (Edit) – Katar

@Katar - Just for reference that page looks to be outdated. A more up to date changelog is located here: zingchart.com/docs/reference/change-log – Holmes

@Holmes - Oops, I posted the wrong link :-) Thanks for posting the updated one. – Katar

Answer 1

I do not believe the following fix will work in the CFCharts in ColdFusion 11 since it uses a ~late-2015 version of ZingChart, but a change was added in v2.2.2 of ZingChart that gives a remedy for this issue.

By setting the scale-x offset:0, the scale will be centered on the node and will behave as a line chart will. Do note that an additional property inside of plotarea called "maskTolerance" will need to be set to [0,0]. This will ensure the bars do not bleed past the scale-y boundaries.

var myConfig = {
type: "mixed",
plotarea: {
	maskTolerance: [0, 0]
},
scaleX: {
	offset: 0,
	guide: {
		visible: true, //set to false by default on some chart types
		lineColor: "red",
		lineWidth: 1
	}
},
series: [{
	type: "bar",
	values: [35, 42, 67, 79, 25, 34, 67, 85]
}, {
	values: [40, 27, 38, 68, 41, 49, 50, 65]
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 200,
width: "100%"
});

<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>

Holmes

Thank you very much for your code example. Works like a charm when using the most recent ZingChart library. Unfortunately you're right when it comes to the current ColdFusion implementation of ZingChart. offset : 0 doesn't show any effect at all. – Hartwig