问题描述:

I have 2 partial views, and each holds their own Pie Chart (made from Highcharts). I load these partials in my main view by calling the Action in the corresponding Controller.

Now I found out how to get rid of the credits at the bottom of the chart, but when I load the two pie charts in my view I get

As you can see, there is a faint gray line going across the bottom of these charts.

Now in my HTML on my main view where I call these partial views.. I use col-md-6 on both of them to get them to line up next to each other, like this:

<div class="col-md-6">

@Html.Action("Chart", "Teams")

</div>

<div class="col-md-6">

@Html.Action("SeriesWinsChart", "Teams")

</div>

I have gone into the DOM explorer to try and find what is causing that border-bottom and I can't seem to find it. I also have tried giving the col-md-6 a property of border-bottom: none; but that did not work.

Here is what I see when I am on the page and click 'view source' for that section:

<div id='chart2_container'></div><script type='text/javascript'>

var chart2;

$(document).ready(function() {

chart2 = new Highcharts.Chart({

chart: { renderTo:'chart2_container', plotShadow: false },

credits: { enabled: false },

plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y; } } } },

title: { style: { font: 'normal 20px Impact', color: 'red' }, text: 'Game Wins' },

series: [{ data: [['Orioles', 5], ['Red Sox', 10]], name: 'Game Wins', type: 'pie' }]

});

});

</script>

<hr />

</div>

I am going to assume that the <hr/> is what is causing this, so how I do I get rid of that in JS?

How do I get rid of the border-bottom?

相关阅读:
Top