0

I have plotted a line chart using NVD3 and i am using bootstrap for responsive design. In a 12 column grid i am trying to plot two line charts. Everything works fine except for the line chart on left the interactive guidelines are getting cut. Here is the html code

        <div class="col-md-12 instance-chart-template">
        <div class="col-md-6 widget-chart with-sidebar">
                <div id="%%instance-name%%-line-chart1-nvd3" style="height: 260px;"><span class="spinner"></span></div>
        </div>
        <div class="col-md-6 widget-chart with-sidebar">
                <div id="%%instance-name%%-line-chart2-nvd3" style="height: 260px;"><span class="spinner"></span></div>
        </div>
    </div>

I am using Interactive Guidelines when plotting the chart. Here is the Javascript

        var chart = nv.models.lineChart()
        .margin({ right: 100 })
            .useInteractiveGuideline(true)

What can i do to solve this issue. Is there any way that i can define the chart area so that the tooltip floats in that area only and doesnot get cut off or any other solution would be appreciated. Let me know in comments if any more details are required. I tried to be as descriptive as possible.

realcoder
  • 19
  • 4

1 Answers1

1

I had a similar issue with min/max X axis values getting cut off, and the only work-around I found to prevent it was to set some padding in the element which contains the SVG element, then set the following CSS for the SVG element itself:

svg.nvd3-svg
    overflow: visible;

That way the svg content doesn't get cut off, just overflows into the padding on the container, which is not ideal, but in my case was enough.

Hope that helps

inolasco
  • 685
  • 8
  • 14