This is a migrated thread and some comments may be shown as answers.

Chart bars getting clipped

2 Answers 14 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 30 May 2017, 10:37 AM

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 #")
        )
    )

2 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 01 Jun 2017, 06:04 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ed
Top achievements
Rank 1
answered on 01 Jun 2017, 10:26 AM

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. 

Tags
Chart
Asked by
Ed
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Ed
Top achievements
Rank 1
Share this question
or