Formatted High Low Chart using Box Plot

[Bart]

I am trying to create a chart formatted like the attached image.  I have started with the box plot chart type, but I am missing the ability to do several things I need.  Examples include labels with the values displayed, ability to move the legend farther down (currently showing just below where the 0% axis would be), and formatting of the median display.

Is it possible to create something like what I need with the box plot chart?  Would another chart type work better?

Thanks,

[Martin Yankov]

Hi Bart,

The HTML Chart control does not provide the customization options you need. The box-plot series are indeed your best option, but by design they cannot display the values next to the boxes and there are no customization settings for the median pointer. There is an option to move the axis crossing value from the 0 value. You need to set the valueAxis.axisCrossingValue to the desired value. Your best option is to hide the upper and lower lines on the box-plot series and modify the tooltip, so it shows only the 3 values.

var chart = new Telerik.UI.RadChart(document.getElementById("chart"), {
    theme: 'light',
    width: 500,
    series: [{
        type: 'boxPlot',
        q1Field: 'lower',
        q3Field: 'upper',
        lowerField: 'lower',
        upperField: 'upper',
        medianField: 'median',
        meanField: 'median',
        outliersField: 'outliers',
        line: {
            opacity: 0
        },
        tooltip: {
            visible: true,
            template: "#=category# <br/> top: #=dataItem.upper#% <br/> low: #=dataItem.lower#% <br/> med: #=dataItem.median#%"
        }
    }],
    dataSource: {
        data: [
            { category: "1 Year", lower: -1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4 },
            { category: "5 Years", lower: -1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, mean: 3.2 },
            { category: "10 Years", lower: -1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5 },
            { category: "15 Years", lower: -1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7 }
        ]
    },
    categoryAxis: {
        field: 'category'
    },
    valueAxis: {
        axisCrossingValue: -3
    }
});

I hope this works for you. Don't hesitate to ask should you have any other questions.

Regards,
Martin Yankov
Telerik