Chart bars getting clipped

[Ed]

I have been trying to create a Tornado style graph in Telerik UI but have been having some issues as there is no immediate support for them. My best bet so far is to create a Ranged Bar graph and hack it slightly to the desired effect. By using the Gap and Spacing settings I am getting the look but its not rendering quite right, the main issue is the top and bottom bars are clipped.

 

Any thoughts on how to get around this greatly appreciated!

 

Thanks

 

 

Code:

 

@(Html.Kendo().Chart()
        .Name("Tornado")
        .Title("My First Tornado")
        .Legend(legend => legend
            .Visible(false)
        )

        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .SeriesDefaults(defaults =>
        {
            defaults.RangeBar().Gap(-1);
            defaults.RangeBar().RangeBarSeries.Spacing = 2;
            defaults.RangeBar().Border(b => b.Color("#000000"));

        })
            .Series(series =>
            {
                series.RangeBar(new double[][] { new double[] { 136, 320 }, new double[] { 136, 244 }, new double[] { 136, 283 } }).Name("Sensitivities");
                series.RangeBar(new double[][] { new double[] { 130, -171 }, new double[] { 130, -74 }, new double[] { 130, 40 }, new double[] { 130, 3 } }).Name("Unique visitors");
            })
        .CategoryAxis(axis => axis
        .Name("series-axis")
        .Color("#880000")
        .Line(l => {
            l.Visible(true);
            l.Width(10);
            l.DashType(ChartDashType.Solid);
        }).MinorTicks(t =>
        {
            t.Visible(false);

        }).MajorTicks( t =>
        {
            t.Visible(false);
        }))
        .CategoryAxis(axis => axis
        .Name("label-axis")
            .Categories("Price 2, 7 ($/mmbtu)", "Resources 5, 10 (mmboe)", "Capex 1250, 1588 ($m)", "Penalties", "Tr 4 Price Structure")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Line(line => line.Visible(false))
            .AxisCrossingValue(133, int.MinValue)
            .MajorGridLines(lines => lines.Visible(true))

        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
    )

[Daniel]

Hi,

The problem will occur because of the negative gap. I am not sure if I understand why is this needed but you can also place the separate series in the same category slot by setting the spacing to -1 - examlpe. If this does meet your requirements then please provide more detailed information about the expected result.

Regards,
Daniel
Progress Telerik

[Ed]

Hey Daniel,

 Thanks for the reply.

You're right! I have the graph looking nice using just the spacing, it took me a while to figure out though.