JavaScript – Highcharts Legend Position SET

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.

Also Read :  Best Online College and Universities Degree Ranking

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

Also Read :  Google API Line Chart with JSON PHP & Mysql

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!.

Leave a Reply

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