JavaScript – Highcharts Legend Position SET

Ajax JavaScript jQuery Technology

JavaScript – Highcharts Legend Position SET

Today, We want to share with you JavaScript – Highcharts Legend Position SET.
In this post we will show you JavaScript – Highcharts Legend Position SET, hear for JavaScript – Highcharts Legend Position SET we will give you demo and example for implement.
In this post, we will learn about JavaScript – Highcharts Legend Position SET with an example.

The legend is a simple box containing a useful symbol and appropriate name for each series item or each point item in the high-chart for JavaScript – Highcharts Legend Position SET

Each series (or each points in case of all pie charts) is all represented by a symbol and its all the name in the legend.

It is also all possible to override names the symbol creator each function and create simple custom legend symbols.

legend : custom

align: String
-left
-center
-right
-Defaults to center.
backgroundColor: ColorName
borderColor: ColorName
borderRadius: Number
-Defaults to 0.
-Square by default, 5px rounded
enabled: Boolean
-Enable or disable the legend.
-Defaults to true.
layout: String
-Horizontal by default,
-vertical
margin: Number
– 12 pixels by default,
– 30 pixels.

highcharts legend example

legend{
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    floating: false
}

View Demo

Custom highcharts legend example

legend: {
	layout: 'vertical',
	align: 'right',
	verticalAlign: 'top',
	floating: true,
	backgroundColor: '#FFFFFF'
},

View Demo

highcharts legend simple – example

legend: {
    align: 'left',
    layout: 'vertical',
    verticalAlign: 'top',
    x: 40,
    y: 0
}

Full Source code : highcharts legend position – Example

<!DOCTYPE html>
<html>
<head>
<title>highcharts legend position SET - Example </title>
<script type='text/javascript' src='yourappsdir/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {<!-- www.ng4free.com-->
    $('#container').highcharts({
        chart: {
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 100
        },        
        xAxis: {
            categories: ['PHP', 'HTML', 'CSS', 'Laravel', 'C', 'C#', 'JavaScript', 'js', 'Mean', 'jQuery', 'Ajax', 'Drupal']
        },
        series: [{
            data: [130.9, 128.5, 225.4, 24.2, 34.0, 287.0, 53.6, 247.5, 20.4, 200.1, 3.6, 111.4]
        }]
    });
});
</script>
</head>
<body>
<script src="yourappsdir/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View Demo

We hope you get an idea about JavaScript – Highcharts Legend Position SET
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Heat Map Tutorial With Examples For Beginners
  2.   Spline with Symbols Chart Tutorial
  3.   Column Pie & Line Chart Tutorial With Examples
  4.   PHP Try Catch Exception & Error Handling Tutorial
  5.   Time Series Zoomable Chart Tutorial With Examples
  6.   How to Open URL in New Tab using ReactJS
  7.   Installing Windows step by step - Install Windows 7
  8.   Get Query String Parameters from URL using JQuery
  9.   Load More Data from Database using vue.js Ajax PHP
  10.   jQuery Modal Popup Window Dialog Box

Leave a Reply

Your email address will not be published. Required fields are marked *