JavaScript – Highcharts Legend Position SET

Rate this post

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

Free Live Chat for Any Issue

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.

Read Also:  Spline with Symbols Chart Tutorial

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

Read Also:  Laravel 6 Set Extra where condition Examples

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.

Download

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