putting vertical axis labels on ajaxtoolkit:barchart not quite working

Question

I'm trying to put vertical axis labels across the bottom of a ajaxToolkit:BarChart. Based on one of the answers I found in this forum (at Ajax Control Toolkit Vertical Labels ), it shows promise, but the result is garbled... The aspx is:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PageStatsChart.aspx.cs" Inherits="JT1.PageStatsChart" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %> <%----%>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script>
    $(function () {
        var barChartID = "<%= BarChart1.ClientID %>";

        var $svg = $("#" + barChartID).find("svg"); // SVG BarChart element
        var $series = $svg.find("text[id=SeriesAxis]"); // labels to rotate

        $series.each(function (index, element) {
            var $element = $(element);

            // we need to remove x and y attributes and add translation
            // so we can rotate the element correctly
            var x = $element.attr("x");
            var y = +$element.attr("y") + 50;

            $element.removeAttr("x");
            $element.removeAttr("y");
            $element.attr("transform", "translate(" + x + ", " + y + ") rotate(-90)");
        });
    });
</script>
    <ajaxToolkit:BarChart ID="BarChart1" runat="server" ChartType="Column" 
        ChartTitle="Page Statistics" 
        CategoryAxisLineColor="#D08AD9" ChartTitleColor="#FF0066" 
        BackColor="DarkGray"
        BaseLineColor="#66FF33" ValueAxisLineColor="#FFCC99"
        ChartHeight="600" ChartWidth="1000" Width="100%">
        <Series>
            <ajaxToolkit:BarChartSeries Name="S1" BarColor="Yellow" />
<%--            <ajaxToolkit:BarChartSeries Name="S2" BarColor="Blue" />
            <ajaxToolkit:BarChartSeries Name="S3" BarColor="Snow" />--%>
        </Series>
    </ajaxToolkit:BarChart>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem Text="Pages By Month" ></asp:ListItem>
        <asp:ListItem Text="Individual Page By Day" Selected="True"></asp:ListItem>
    </asp:RadioButtonList>
   <asp:DropDownList ID="DateDropDownId" runat="server" AutoPostBack="True" Visible="False">
    </asp:DropDownList>  
</asp:Content>

and in Page_Load, the chart is initialized like so:

    string[] namtoks = names.Split(',');
    BarChart1.ChartTitle = DateTime.Now.Date.ToString();
    BarChart1.CategoriesAxis = names;
    List<decimal> dvs = new List<decimal>();
    string[] vtoks = vals.Split(',');
    foreach (string s in vtoks)
    {
        decimal dec = System.Convert.ToDecimal(s);
        dvs.Add(dec);
    }

    decimal[] s1data = dvs.ToArray();
    BarChart1.Series[0].Data = s1data;

Are there any "spacing" properties of the chart elements that should be used to straighten this out? I don't understand why the sporadic spacing differences occur. Thanks for any ideas!