[json] graphset > arrows > mediaRules

<!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: "line",
      arrows: [{
          backgroundColor: "red",
          alpha: 0.7,
          direction: "top", //location of node in relation to end of arrow
          length: 75, //length of arrow
          mediaRules: [{
            maxWidth: 400,
            backgroundColor: 'blue',
          }],
          to: { //either to or from are required, but not both
            hook: "node:plot=0,index=4" //hooks or x,y postions can be used
          },
          label: {
            text: "Look Here",
            bold: true,
            backgroundColor: "none",
            borderWidth: 0,
            fontAngle: 90,
            offsetX: -10,
            offsetY: 8
          }
        },
        {
          backgroundColor: "green",
          alpha: 0.2,
          borderAlpha: 1,
          from: {
            hook: "node:plot=1,index=4"
          },
          to: {
            hook: "node:plot=1,index=7"
          }
        }
      ],
      series: [{
          "values": [182, 155, 161, 125, 95, 150, 140, 150, 173, 147, 208, 136]
        },
        {
          "values": [243, 189, 213, 190, 267, 226, 245, 294, 220, 255, 107, 192]
        },
      ]
    };

    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: "line",
  arrows: [{
      backgroundColor: "red",
      alpha: 0.7,
      direction: "top", //location of node in relation to end of arrow
      length: 75, //length of arrow
      mediaRules: [{
        maxWidth: 400,
        backgroundColor: 'blue',
      }],
      to: { //either to or from are required, but not both
        hook: "node:plot=0,index=4" //hooks or x,y postions can be used
      },
      label: {
        text: "Look Here",
        bold: true,
        backgroundColor: "none",
        borderWidth: 0,
        fontAngle: 90,
        offsetX: -10,
        offsetY: 8
      }
    },
    {
      backgroundColor: "green",
      alpha: 0.2,
      borderAlpha: 1,
      from: {
        hook: "node:plot=1,index=4"
      },
      to: {
        hook: "node:plot=1,index=7"
      }
    }
  ],
  series: [{
      "values": [182, 155, 161, 125, 95, 150, 140, 150, 173, 147, 208, 136]
    },
    {
      "values": [243, 189, 213, 190, 267, 226, 245, 294, 220, 255, 107, 192]
    },
  ]
};

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