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