• Edit
  • Download
  • <!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%'
    });