[json] graphset > legend > scroll > bar

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'pie',
      legend: {
        maxItems: 5,
        overflow: 'scroll',
        scroll: {
          bar: {
            backgroundColor: '#ffe6e6',
            border: '1px solid red',

            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'blue'
            }]
          },
          handle: {
            backgroundColor: '#ffe6e6',
            borderLeft: '2px solid red',
            borderRight: '2px solid red',
            borderTop: '2px solid red',
            borderBottom: '2px solid red',
            borderRadius: '15px'
          }
        },
        x: '75%',
        y: '25%',


        mediaRules: [{
          maxWidth: 400,
          x: '60%',
        }]
      },
      plotarea: {
        marginRight: '30%',
        marginTop: '15%'
      },
      plot: {
        valueBox: {
          fontSize: 11,
          fontWeight: 'normal',
          offsetR: '50%'
        }
      },
      series: [{
          values: [234]
        },
        {
          values: [121]
        },
        {
          values: [77]
        },
        {
          values: [65]
        },
        {
          values: [59]
        },
        {
          values: [35]
        },
        {
          values: [34]
        },
        {
          values: [31]
        },
        {
          values: [16]
        },
        {
          values: [14]
        },
        {
          values: [13]
        },
        {
          values: [12]
        },
        {
          values: [11]
        },
        {
          values: [10]
        },
        {
          values: [9]
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

let chartConfig = {
  type: 'pie',
  legend: {
    maxItems: 5,
    overflow: 'scroll',
    scroll: {
      bar: {
        backgroundColor: '#ffe6e6',
        border: '1px solid red',

        mediaRules: [{
          maxWidth: 400,
          backgroundColor: 'blue'
        }]
      },
      handle: {
        backgroundColor: '#ffe6e6',
        borderLeft: '2px solid red',
        borderRight: '2px solid red',
        borderTop: '2px solid red',
        borderBottom: '2px solid red',
        borderRadius: '15px'
      }
    },
    x: '75%',
    y: '25%',


    mediaRules: [{
      maxWidth: 400,
      x: '60%',
    }]
  },
  plotarea: {
    marginRight: '30%',
    marginTop: '15%'
  },
  plot: {
    valueBox: {
      fontSize: 11,
      fontWeight: 'normal',
      offsetR: '50%'
    }
  },
  series: [{
      values: [234]
    },
    {
      values: [121]
    },
    {
      values: [77]
    },
    {
      values: [65]
    },
    {
      values: [59]
    },
    {
      values: [35]
    },
    {
      values: [34]
    },
    {
      values: [31]
    },
    {
      values: [16]
    },
    {
      values: [14]
    },
    {
      values: [13]
    },
    {
      values: [12]
    },
    {
      values: [11]
    },
    {
      values: [10]
    },
    {
      values: [9]
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: 400,
  width: '100%'
});