Demo of legend options

by stitot

HTML

<!-- script src="https://code.highcharts.com/highcharts-autoload.js"></script
-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/controls@main/js/controls.js" type="module"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

<highcharts-controls target="#container">
  <highcharts-control type="boolean" path="legend.enabled" value="true"></highcharts-control>
  <highcharts-control type="array-of-strings" path="legend.align" value="center" options="left,center,right"></highcharts-control>
  
</highcharts-controls>

<highcharts-controls target="#container">
  
  <highcharts-control type="number" path="legend.x"></highcharts-control>
  <highcharts-control type="color" path="legend.backgroundColor" value="#efefef"></highcharts-control>
</highcharts-controls>

CSS

@import url("https://cdn.jsdelivr.net/gh/highcharts/controls@main/css/controls.css");

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.highcharts-figure {
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-controls {
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Demo of <em>legend</em> options'
    },
    series: [
        {
            type: 'column',
            data: [
                1,
                3,
                2,
                4
            ],
            colorByPoint: true
        }
    ],
    
});