Position on the chart in the Highcharts

Question

Position on the chart in the Highcharts

I have developed 2 highcharts in the code below:

<div>
   <p id="container">
   </p>
   <p id="cont">
   </p>

   </div>

I specified the width and height as follows:

 $('#cont').highcharts({
            chart: {
                width: 500,
                height: 300,

                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },

The "cont" chart is positioned below the "container" chart, but I want both charts to be on the same line. See image for reference:

https://i.sstatic.net/bUpHZ.png

Additionally, I would like to know how to add a border to the charts.

html css highcharts

Answer 1

Answer №1

The Highcharts website showcases an impressive example of an angular gauge demo, demonstrating how to achieve this.

Within their code, the <div> elements are structured and styled as follows:

<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

Visual representation can be viewed here:

https://i.sstatic.net/2Qb7e.png

To add a border to your charts, you can modify the code like this:

    chart: {
        type: 'solidgauge',
        borderColor: 'red',
        borderWidth: 1
    },

This modification will result in visually altered charts:

https://i.sstatic.net/KJMRu.png

For further insights into adjusting appearance options for the chart such as border radius and background color, refer to the API documentation: http://api.highcharts.com/highcharts#chart

I trust this information proves valuable.

Answer 2

The Highcharts website showcases an impressive example of an angular gauge demo, demonstrating how to achieve this.

Within their code, the <div> elements are structured and styled as follows:

<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

Visual representation can be viewed here:

https://i.sstatic.net/2Qb7e.png

To add a border to your charts, you can modify the code like this:

    chart: {
        type: 'solidgauge',
        borderColor: 'red',
        borderWidth: 1
    },

This modification will result in visually altered charts:

https://i.sstatic.net/KJMRu.png

For further insights into adjusting appearance options for the chart such as border radius and background color, refer to the API documentation: http://api.highcharts.com/highcharts#chart

I trust this information proves valuable.

Answer 3

Answer №2

<p> is considered a block element, and should always come after the previous element. To ensure they fit on one line, consider using <span> instead of <p>. You can adjust the sizes of the spans as needed:

<div>
  <span id="container">
  </span>
  <span id="cont">
  </span>
</div>

Then in your CSS:

span#container {
  width: 50%;
  border: 1px solid black;
}
span#cont {
  width: 50%;
  border: 1px solid black;
}

Answer 4

<p> is considered a block element, and should always come after the previous element. To ensure they fit on one line, consider using <span> instead of <p>. You can adjust the sizes of the spans as needed:

<div>
  <span id="container">
  </span>
  <span id="cont">
  </span>
</div>

Then in your CSS:

span#container {
  width: 50%;
  border: 1px solid black;
}
span#cont {
  width: 50%;
  border: 1px solid black;
}

Answer 5

Answer №3

To enhance the presentation, it is recommended to either segregate both charts or apply CSS styling.

.highcharts-container{float:left;width:500px}

or

.container{float:left;width:500px}

This approach will assist you in achieving a better layout.

Answer 6

To enhance the presentation, it is recommended to either segregate both charts or apply CSS styling.

.highcharts-container{float:left;width:500px}

or

.container{float:left;width:500px}

This approach will assist you in achieving a better layout.

Position on the chart in the Highcharts

Answer №1

Answer №2

Answer №3

Similar questions

Executing PHP code upon clicking an HTML button

Change the CSS property to override the text-overflow with ellipsis

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

Delete the right-hand p-timeline-event-opposite margin from the Angular 17 PrimeNG Timeline

React and SASS - issue with checkbox component not being properly aligned with its label

Display a popover when the button is clicked using jQuery

Is the table not displaying properly in the print preview with a messy

Transmit data from the Windows Communication Foundation to JavaScript

Select a specific element to apply a CSS selector for a button

What's the best way to align text at the center of this DIV?

Is it achievable to create shadows that do not overlap?

Error during compilation due to a missing parenthesis in the loop structure

JavaScript and Responsive Design Techniques

Best Practices for Integrating PHP Code into an HTML File for Contact Form Placement

Icon button with label positioned underneath - utilizing Font Awesome icons

Choosing the initial hyperlink provided by a search engine like Google

Newbie inquiries regarding the process of migrating a CRUD application to PhalconPHP

Retrieve the HTML content from the string that is returned

Double Marker Challenge in Brochure

Showing a placeholder image in the absence of any image