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://cdn.jsdelivr.net/gh/highcharts/[email protected]/js/controls.js" type="module"></script>

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

<highcharts-controls>
  <highcharts-group header="Legend options">
    <highcharts-group-description>Options for the legend.</highcharts-group-description>
    <highcharts-control path="legend.enabled"></highcharts-control>
    <highcharts-control path="legend.align" options="left,center,right"></highcharts-control>
    <highcharts-control path="legend.x"></highcharts-control>
    <highcharts-control path="legend.backgroundColor" value="#efefef"></highcharts-control>
    <highcharts-control path="series.0.colorByPoint"></highcharts-control>
  </highcharts-group>
</highcharts-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;
}

highcharts-group-description {
    display: none;
}

JavaScript

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