showLegend

Show or hide legend. Recommended for stacked diagrams.

Note

The size of the diagramm gets higher inside of the canvas without an legend.

Specification

Default implementation: { showLegend : false }

Key

Name Alias Category 
showLegend show__legend Show 

Value

Allow true or false as value.

Default Validation Type 
false ^(?:true|false) Boolean 

Example A.

Show legend

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile and desktop google pagerank performance score for a certain website.

  Value Type
Source "https://docs.statosio.com/data/performance.json"  
X "name" String
Y [ "mobile", "desktop" ] Array
Options { "showLegend" : true } Object

Javascript

  • Invoke Function
d3.statosio( 
    file, 
    "name", 
    [ "mobile",  "desktop" ], 
    { "showLegend" : true }
)
  • HTML Implementation
<!DOCTYPE html>
<head>
    <title>docs.statosio - showLegend</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "https://docs.statosio.com/data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile",  "desktop" ], 
                    { "showLegend" : true }
                )
            } )
    </script>
</body>

Ruby

  • Gem Install
gem install statosio
gem install prawn
gem install prawn-svg
gem install open-uri
  • Implementation
require "statosio"

require "open-uri"
require "prawn"
require "prawn-svg"

url = "https://docs.statosio.com/data/performance.json"
file = OpenURI::open_uri( url ).read
dataset = JSON.parse( file )

statosio = Statosio::Generate.new
chart = statosio.svg(
    dataset: dataset,
    x: "name", 
    y: [ "mobile",  "desktop" ],
    options: {"showLegend"=>true}
    
)

Prawn::Document.generate( "statosio.pdf" ) do | pdf |
  pdf.svg( chart, width: 500 )
end

Example B.

Hide legend

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile and desktop google pagerank performance score for a certain website.

  Value Type
Source "https://docs.statosio.com/data/performance.json"  
X "name" String
Y [ "mobile", "desktop" ] Array
Options { "showLegend" : false } Object

Javascript

  • Invoke Function
d3.statosio( 
    file, 
    "name", 
    [ "mobile",  "desktop" ], 
    { "showLegend" : false }
)
  • HTML Implementation
<!DOCTYPE html>
<head>
    <title>docs.statosio - showLegend</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "https://docs.statosio.com/data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile",  "desktop" ], 
                    { "showLegend" : false }
                )
            } )
    </script>
</body>

Ruby

  • Gem Install
gem install statosio
gem install prawn
gem install prawn-svg
gem install open-uri
  • Implementation
require "statosio"

require "open-uri"
require "prawn"
require "prawn-svg"

url = "https://docs.statosio.com/data/performance.json"
file = OpenURI::open_uri( url ).read
dataset = JSON.parse( file )

statosio = Statosio::Generate.new
chart = statosio.svg(
    dataset: dataset,
    x: "name", 
    y: [ "mobile",  "desktop" ],
    options: {"showLegend"=>false}
    
)

Prawn::Document.generate( "statosio.pdf" ) do | pdf |
  pdf.svg( chart, width: 500 )
end

Example C.

Hide legend

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile and desktop google pagerank performance score for a certain website.

  Value Type
Source "https://docs.statosio.com/data/performance.json"  
X "name" String
Y [ "mobile", "desktop" ] Array
Options { "showLegend" : true, "showAverage" : false } Object

Javascript

  • Invoke Function
d3.statosio( 
    file, 
    "name", 
    [ "mobile",  "desktop" ], 
    { "showLegend" : true, "showAverage" : false }
)
  • HTML Implementation
<!DOCTYPE html>
<head>
    <title>docs.statosio - showLegend</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "https://docs.statosio.com/data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile",  "desktop" ], 
                    { "showLegend" : true, "showAverage" : false }
                )
            } )
    </script>
</body>

Ruby

  • Gem Install
gem install statosio
gem install prawn
gem install prawn-svg
gem install open-uri
  • Implementation
require "statosio"

require "open-uri"
require "prawn"
require "prawn-svg"

url = "https://docs.statosio.com/data/performance.json"
file = OpenURI::open_uri( url ).read
dataset = JSON.parse( file )

statosio = Statosio::Generate.new
chart = statosio.svg(
    dataset: dataset,
    x: "name", 
    y: [ "mobile",  "desktop" ],
    options: {"showLegend"=>true, "showAverage"=>false}
    
)

Prawn::Document.generate( "statosio.pdf" ) do | pdf |
  pdf.svg( chart, width: 500 )
end