My layout consists of two rows. I have a CanvasJS based graph generating in the top row, but the 2nd row appears to be positioned behind the graph instead of below it.
What could be causing this issue?
<div class='row'>[Graph generation code goes here]</div>
<div class='row'></div>
Is there a solution to resolve this overlapping problem?
Adjusting the height of the chart-container should do the trick for you.
var graph = new CanvasJS.Chart("chartContainer", {
title: {
text: "Column Chart"
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
graph.render();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
<div class="row">
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam sem et. Nisl purus in mollis nunc sed id semper. Non consectetur a erat nam. Eget mauris pharetra et ultrices neque ornare aenean. Sed nisi lacus sed viverra. Tincidunt ornare massa eget egestas purus viverra accumsan. Et leo duis ut diam quam nulla porttitor massa. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Neque gravida in fermentum et sollicitudin ac. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in.</p>
</div>
</div>I recently created a calculator with 3 input fields to calculate heart rate for cardio sessions. However, I am facing challenges when trying to implement it into my WordPress site. When testing it out in a tryout editor on the web, it works fine (http://w ...
When I open a text file, it contains several lines like the examples below. surname australia enter name j.jonhs enter name j.cause enter name f.london enter I am seeking assistance to modify the code snippet below so that it captures the first line m ...
Several asp.net controls produce output in a certain way, making it challenging to customize their appearance (like childview in grid). I am struggling with changing the position of the <tr> content and currently only have the idea of using JavaScr ...
Here is the grid layout on PC: https://i.sstatic.net/4HRvd.png And here is the grid layout on mobile devices: https://i.sstatic.net/URBjb.png I am looking to rearrange the order and layout of the grid. I have tried using flexbox, but I need to group B an ...
When creating a website with a forum, I encountered an issue where the page can be scrolled horizontally only on the forum page. I am using minimal CSS and primarily Bootstrap for styling. Upon removing the <div class="container col-md-6" st ...
I have recently started learning Reactjs and I'm attempting to run a hello world program in the browser. However, I encountered an error which reads: react-dom.min.js:12 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_ ...
I have made significant progress towards getting the Google signin feature to work, reaching 95% completion. However, I am currently facing two issues with the code. Here is a simplified version of my current implementation: loginWithGoogle(): void { //t ...
Despite specifying the image dimensions to be 50px by 50px, it appears stretched on the y-axis like this. View Stretched Image I suspect that the issue lies with the CSS styling applied. Here is my current CSS code: canvas { background-color: green; ...
In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...
For testing purposes, I have locally installed Service Fabric. As a preliminary test, I created a basic C# app with an Angular front end without making any changes to it. When I try to run the app, I encounter the following error: An unhandled exception oc ...
Can someone assist in removing the sidebar:cart-page from here? https://i.sstatic.net/AOb4S.jpg I am looking to create a common inner cart component that can be searched based on tags without including sidebar:cart-page. https://i.sstatic.net/8rpvB.png ...
I've encountered a peculiar Type Error while working with Abstract Classes in Angular 16. Error: Uncaught (in promise): TypeError: this.httpService.get is not a function Could it be that my interpretation of using Abstract Classes is off? Everythin ...
Question: I am facing an issue with the appearance of the searchbox and submit button in my PHP project. They look different compared to a simple HTML form. How can I fix this? The code on the PHP subpage is as follows: <header id="header"> <div ...
One interesting feature I have implemented is the lazy loading of a module called calendar.module, which is loaded in the app-routing.module like this: { path: "calendars", canActivate: [AuthGuard], loadChildren: () => import(". ...
Can someone explain how to integrate the following Angular starter template into an Express framework? https://github.com/gdi2290/angular-starter I am able to start the webpack dev server without any issues, but I would like to utilize additional librari ...
I am experiencing an issue where the functionality works properly without using the link to bootsrap.css. <link rel="stylesheet" type="text/css" href="css/bootsrap.css"/> However, when I include this bootstrap link, the mouseover feature stops work ...
When I use the resize function to reload my page, I only want it to reload once when the page size changes from small (less than or equal to 768px) to big or vice versa. Here is my current code: $(window).resize(function(){ // if(document.body.clientWid ...
Is there a way to copy all rows in jQuery DataTables into a JavaScript array by clicking the header checkbox? https://i.sstatic.net/57dTB.png I need to locate where jQuery DataTables store the HTML for the remaining page of rows so that I can manipulate ...
I've been experimenting with Bootstrap and want to create a small personal page with a navbar design like the one below: <body> <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> <div class="container"> <div c ...
Is there a reliable code coverage measurement tool or framework that can easily be integrated to assess the code coverage of Angular2-TypeScript code with QUnit tests? I have come across some frameworks like remap-istanbul, blanket.js etc., but these fram ...