Interactive Legend in Bar Charts

JavaScript applications may implement an interactive legend, to hide individual series in multi-series charts with a single mouse click. When not already built-in, we emulate it with custom code or hacks. Current template demonstrates this feature, with a heavily styled legend, on grouped column charts (most other chart types - including single-series charts, or pie charts - may support it as well). Switch Show Interactive to disable the interactive legend as well. Microsoft Chart has been included as well, but the server-side ASP.NET control does not support a client-side interactive legend.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
#legend_chart_div { border-radius: 7px; }

JavaScript

$(function () { makeChart(); });
var chart;
var options;
var colorPalette;
function makeChart() {
   // color palette
   colorPalette = ["#007c9c", "#019fcc", "#8fcd3e", "#82b93a", "#638a2d"];
   // JSON chart options
   options = {
      size: {
         width: "300",
         height: "185"
      },
      // chart events
      load: "onLoad",
      loaded: "afterLoaded",
      chartMouseMove: "afterLoaded",
      //sideBySideSeriesPlacement: true,
      palette: colorPalette,
      // interaction
      //isResponsive: true,
      //enableRotation: false,
      // Export menu is hidden by default (no need for enableCanvasRendering: false)
      margin: {
         left: 0,
         right: 5,
         top: 0,
         bottom: 0
      },
      title: {
         text: "Global Sales",
         textAlignment: "center",
         font: {
            fontFamily: "Verdana",
            size: "14px",
            fontWeight: "bold",
            color: "#000000",
         },
         background: "transparent",
      },
      legend: {
      toggleSeriesVisibility: false,
      legendItemClick: function(e) { alert(e.data); },
         // legend is visible by default (no need for visible: true)
         position: "right",
         alignment: "center",
         columnCount: 1,
         itemPadding: 2,
         enableScrollbar: false,
         shape: "circle",
         font: {
            fontFamily: "Verdana",
            size: "12px",
            fontWeight: "bold",
            fontStyle: "italic",
            color: "#3ed429",
         },
         border: {
            color: "rgba(136,136,136,0.58)",
            width: "2",
         },
         background: "rgba(255,255,246,0.5)",
      },
      chartArea: {
         border: {
            color: 'transparent',
            opacity: 1,
         },
      },
      primaryXAxis: {
         visible: true,
         stripLine: [{
            visible: false
         }],
         title: {
            font: {
               fontFamily:...