Bar Chart with Step Chart

[SamMorrowDrums]

Aligning the steps with the centre of the bar does not really work as a chart.

If it is possible instead to have an option where the steps are flat above bars, and change value in between bars this would be much more effective.

This is only an issue when combining step charts with bar charts.

[SamMorrowDrums]

Screenshot to highlight the issue:

[SamMorrowDrums]

It would be absolutely amazing if there was a way to make a type of step, that lined up above bars, rather than changing value in the middle of them. I hope it's not too specific a request.

[OrphicAbyss]

Here is an example interpolate function to create a bar centered step graph:

var line = d3.svg.line()
    .interpolate(function(points) {
        // halfStep needs to be half of the step size of the categories
        var out = "", halfStep = x(1)/2;
        out += points[0][0] - halfStep + " " + points[0][1];
        points.shift();
        points.forEach(function (point) {
            out += 'H' + (point[0] - halfStep) + 'V' + point[1] + 'H' + (point[0] + halfStep);
        });
        return out;
    })
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

[nimasmi]

This is only an issue when combining step charts with bar charts.

It is also an issue for a vanilla step chart. With the current implementation, the final data point is not represented by anything tangible, as in this chart:

The intent is to represent a value for the duration of a week, but the final week's green value (0.14) here is represented by a vertical line only, and the orange value is almost impossible to see.

[masayuki0812]

Hi, I agree to modify step chart interpolation as you suggested. Now step chart uses step interpolation type (before this fix, it was step-after), so step chart will change its line on the tick point (before this fix, it was on the data point).

And I introduced line_step_type so that we can specify step interpolation type. So if you want to use step-after, which is the previous default, please specify this option as step-after.

Could you try the latest code? Thanks.

[nimasmi]

Thanks for this change. It addresses the alignment issue, but introduces a new problem in my use case at least.

Before

• Bars are not centred over labels.
• Five labels, but only four full-width bars.
• Fifth bar is shown as a thin line for its left-hand edge only.

After

• Bars are centred over labels ✓
• All five bars represented ✓
• First and last bars are shown only half-width (so the width of all five bars is the same as the width of four bars in the 'before' picture). This is still an improvement, at least.

[masayuki0812]

I think 3rd issue has been fixed now. Only when category axis, the edges of step chart will be shown. Could you try the latest version again? Thanks.

[nimasmi]

This is great. Before:

After:

Thanks very much for the fix.

[nimasmi]

PS the improvement from 6bebdb2 is also noticeable.

[masayuki0812]

Thank you for your confirming. Then, please let me close this issue.

[Mantish]

Hi
This is working fine for regular charts, but when the axis is rotated (like in the first screenshot), it doesn't look good.
This is due to the step interpolation that works in a "horizontal" way.
...I think I can provide a PR, if you agree this is something that needs to be fixed

[amran-mamoon-fn]

For a single data point, it's showing nothing. Is there any way to show a vertical line for a single data point?

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300]
        ],
        types: {
            data1: 'step'
        }
    },
    line: {
        step: {
            type: 'step-after'
        }
     }
});