amelieykw amelieykw

With side navigation, you have several options:

Always display the navigation pane to the left of the page content
Use a collapsible, "fully automatic" responsive side navigation
Open navigation pane over the left part of the page content
Open navigation pane over all of the page content
Slide the page content to the right when opening the navigation pane
Display the navigation pane on the right side instead of the left side

Step 1) Add HTML :

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

Step 2) Add CSS :

Definition and Usage

The className property sets or returns the class name of an element (the value of an element's class attribute).

Tip: A similar property to className is the classList property.

Syntax

Return the className property:

HTMLElementObject.className

Since Highcharts 5.0 you can create responsive charts much the same way you work with responsive web pages.

A top-level option, responsive, exists in the configuration.

It lets you define a set of rules, each with a condition, for example maxWidth: 500, and a separate set of chartOptions that is applied on top of the general chart options.

The chartOptions work as overrides to the regular chart options, which apply when the rule applies.

For example, the following rule will hide the legend for charts less than 500 pixels wide:

Change the size of an element using the mouse.

Demo

Enable any DOM element to be resizable.

With the cursor grab the right or bottom border and drag to the desired width or height.

<!doctype html>

A. Include Highcharts

load from ajax.googleapis.com and code.highcharts.com

In the <head> section :

<script src="https://code.highcharts.com/highcharts.js"></script>

for IE6, 7 or 8 (in a conditional comment that hides it from modern browsers):

If you don't care about the export, a data table is simply added by the export-data module and a simple option, exporting.showTable.

However this table doesn't support exporting to SVG or other image formats, but with a little programming on top of the Highcharts data and drawing API you can draw a table.

See our jsFiddle demo for source code and live example.

Layout and Positioning
- Chart & Plot Area
- Credits
- Axis Labels
- Legend
- Title and Subtitle
- Export
Borders
Backgrounds
Fonts

	@import 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css';

	#resizer {
	border: 1px solid silver;
	}
	#inner-resizer { /* make room for the resize handle */
	padding: 10px;
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>