Dynamic Labels on Legend and Crosshair

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/48PCPXMM

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/dev/zingchart.min.js"></script>
  <style>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      margin: 2rem;
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <div id="zc" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script>
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'line',
        title: {
          text: 'STREAMS',
          align: 'left',
          color: '#999999',
          fontSize: '10px',
          marginTop: '178px',
          paddingLeft: '90px',
        },
        legend: {
          borderWidth: '0px',
          item: {
            text: "\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>",
            color: '#666666',
            fontWeight: 'bold',
            margin: '5 30 5 10',
          },
          layout: '2x3',
          margin: '60px auto auto 14px',
          marker: {
            type: 'default',
            backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=',
            backgroundPosition: '50% 50%',
            backgroundRepeat: false,
            borderRadius: '2px',
            borderWidth: '0px',
            height: '12px',
            offsetX: '22px',
            offsetY: '-12px',
            width: '12px',
          },
          markerOff: {
            backgroundColor: '#bbb',
            backgroundImage: 'none',
          },
          toggleAction: 'remove',
        },
        plot: {
          tooltip: {
            visible: false,
          },
          dataWeek: [
            'Oct 1 - Oct 2',
            'Oct 2 - Oct 4',
            'Oct 5 - Oct 9',
            'Oct 10 - Oct 11',
            'Oct 11 - Oct 14',
            'Oct 15 - Oct 17',
            'Oct 18 - Oct 22',
            'Oct 23 - Oct 25',
            'Oct 26 - Oct 27',
            'Oct 28 - Oct 29',
          ],
          animation: {
            speed: 400,
          },
          aspect: 'spline',
          lineWidth: '2px',
          marker: {
            size: 3,
            visible: true,
            rules: [{
              rule: '%node-index > 0',
              visible: false,
            }, ],
          },
          thousandsSeparator: ',',
        },
        plotarea: {
          margin: '200px 50px dynamic 50px',
        },
        scaleX: {
          labels: [
            'Oct 1 - Oct 2',
            'Oct 2 - Oct 4',
            'Oct 5 - Oct 9',
            'Oct 10 - Oct 11',
            'Oct 11 - Oct 14',
            'Oct 15 - Oct 17',
            'Oct 18 - Oct 22',
            'Oct 23 - Oct 25',
            'Oct 26 - Oct 27',
            'Oct 28 - Oct 29',
          ],
          guide: {
            alpha: 0.3,
            lineWidth: '3px',
            rules: [{
              rule: '%i == 0',
              visible: false,
            }, ],
          },
          item: {
            fontSize: '10px',
          },
          itemsOverlap: false,
          maxItems: '999px',
          offsetStart: '40px',
        },
        scaleY: {
          guide: {
            lineColor: '#9e9e9e',
            lineGapSize: '5px',
            lineStyle: 'dotted',
          },
          item: {
            fontSize: '10px',
            offsetX: '30px',
            offsetY: '-10px',
          },
          lineWidth: 0,
          short: true,
          tick: {
            visible: false,
          },
        },
        crosshairX: {
          alpha: 1,
          lineColor: '#00e676',
          lineWidth: '2px',
          marker: {
            visible: true,
            size: 3,
            borderWidth: 1,
            borderColor: '#ffffff',
          },
          plotLabel: {
            alpha: 0,
          },
          scaleLabel: {
            fontSize: '10px',
          },
          shadow: true,
          shadowAlpha: 0.2,
          shadowAngle: 0,
          shadowBlur: 18,
          shadowColor: '#00e676',
          shadowDistance: 0,
        },
        labels: [{
          align: 'left',
          id: 'week',
          color: '#666666',
          x: '50px',
          y: '10px',
          fontSize: '10px',
          fontWeight: 'bold',
          text: "WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
          defaultValue: 'Oct 28 - Oct 29',
        }, ],
        series: [{
            text: 'Apple Music',
            values: [25, 44, 55, 40, 43, 55, 80, 95, 125, 200],
            lineColor: '#9c27b0',
            marker: {
              backgroundColor: '#ba68c8',
            },
          },
          {
            text: 'Google Play',
            values: [15, 24, 25, 20, 23, 25, 50, 55, 75, 100],
            lineColor: '#ffea00',
            marker: {
              backgroundColor: '#ffea00',
            },
          },
          {
            text: 'Spotify',
            values: [125, 144, 155, 140, 143, 155, 180, 195, 1125, 1200],
            lineColor: '#00e676',
            marker: {
              backgroundColor: '#00e676',
            },
          },
          {
            text: 'Youtube UGC',
            values: [115, 124, 135, 120, 133, 135, 150, 155, 1025, 1400],
            lineColor: '#f50057',
            marker: {
              backgroundColor: '#f50057',
            },
          },
          {
            text: 'Youtube Official Music Videos',
            values: [145, 164, 125, 125, 131, 132, 140, 145, 1015, 1100],
            lineColor: '#f44336',
            marker: {
              backgroundColor: '#f44336',
            },
          },
        ],
      };
      let previousGuideObject = null;
      // when user is moving the mouse around
      zingchart.bind('zc', 'mousemove', function(e) {
        // if we left the plotarea
        if (!e.plotarea && previousGuideObject) {
          zingchart.exec('zc', 'setguide', {
            keyvalue: previousGuideObject.items[0].keyvalue,
          });
        }
      });
      // when user mouse leaves full chart
      zingchart.bind('zc', 'mouseout', function(e) {
        zingchart.exec('zc', 'setguide', {
          keyvalue: previousGuideObject.items[0].keyvalue,
        });
      });
      // save the guide position for when mouse
      // leaves chart
      zingchart.bind('zc', 'guide_mousemove', function(e) {
        previousGuideObject = e;
      });
      // render chart
      zingchart.render({
        id: 'zc',
        data: chartConfig,
        height: '100%',
        width: '100%',
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/dev/zingchart.min.js"></script>
  </head>
  <body class="zc-body">
    <!-- CHART CONTAINER -->
    <div id="zc" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
  </body>
</html>

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
    // Javascript code to execute after DOM content
    // full ZingChart schema can be found here:
    // https://www.zingchart.com/docs/api/json-configuration/
    let chartConfig = {
        type: 'line',
        title: {
            text: 'STREAMS',
            align: 'left',
            color: '#999999',
            fontSize: '10px',
            marginTop: '178px',
            paddingLeft: '90px',
        },
        legend: {
            borderWidth: '0px',
            item: {
                text: "\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>",
                color: '#666666',
                fontWeight: 'bold',
                margin: '5 30 5 10',
            },
            layout: '2x3',
            margin: '60px auto auto 14px',
            marker: {
                type: 'default',
                backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=',
                backgroundPosition: '50% 50%',
                backgroundRepeat: false,
                borderRadius: '2px',
                borderWidth: '0px',
                height: '12px',
                offsetX: '22px',
                offsetY: '-12px',
                width: '12px',
            },
            markerOff: {
                backgroundColor: '#bbb',
                backgroundImage: 'none',
            },
            toggleAction: 'remove',
        },
        plot: {
            tooltip: {
                visible: false,
            },
            dataWeek: [
                'Oct 1 - Oct 2',
                'Oct 2 - Oct 4',
                'Oct 5 - Oct 9',
                'Oct 10 - Oct 11',
                'Oct 11 - Oct 14',
                'Oct 15 - Oct 17',
                'Oct 18 - Oct 22',
                'Oct 23 - Oct 25',
                'Oct 26 - Oct 27',
                'Oct 28 - Oct 29',
            ],
            animation: {
                speed: 400,
            },
            aspect: 'spline',
            lineWidth: '2px',
            marker: {
                size: 3,
                visible: true,
                rules: [
                    {
                        rule: '%node-index > 0',
                        visible: false,
                    },
                ],
            },
            thousandsSeparator: ',',
        },
        plotarea: {
            margin: '200px 50px dynamic 50px',
        },
        scaleX: {
            labels: [
                'Oct 1 - Oct 2',
                'Oct 2 - Oct 4',
                'Oct 5 - Oct 9',
                'Oct 10 - Oct 11',
                'Oct 11 - Oct 14',
                'Oct 15 - Oct 17',
                'Oct 18 - Oct 22',
                'Oct 23 - Oct 25',
                'Oct 26 - Oct 27',
                'Oct 28 - Oct 29',
            ],
            guide: {
                alpha: 0.3,
                lineWidth: '3px',
                rules: [
                    {
                        rule: '%i == 0',
                        visible: false,
                    },
                ],
            },
            item: {
                fontSize: '10px',
            },
            itemsOverlap: false,
            maxItems: '999px',
            offsetStart: '40px',
        },
        scaleY: {
            guide: {
                lineColor: '#9e9e9e',
                lineGapSize: '5px',
                lineStyle: 'dotted',
            },
            item: {
                fontSize: '10px',
                offsetX: '30px',
                offsetY: '-10px',
            },
            lineWidth: 0,
            short: true,
            tick: {
                visible: false,
            },
        },
        crosshairX: {
            alpha: 1,
            lineColor: '#00e676',
            lineWidth: '2px',
            marker: {
                visible: true,
                size: 3,
                borderWidth: 1,
                borderColor: '#ffffff',
            },
            plotLabel: {
                alpha: 0,
            },
            scaleLabel: {
                fontSize: '10px',
            },
            shadow: true,
            shadowAlpha: 0.2,
            shadowAngle: 0,
            shadowBlur: 18,
            shadowColor: '#00e676',
            shadowDistance: 0,
        },
        labels: [
            {
                align: 'left',
                id: 'week',
                color: '#666666',
                x: '50px',
                y: '10px',
                fontSize: '10px',
                fontWeight: 'bold',
                text: "WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
                defaultValue: 'Oct 28 - Oct 29',
            },
        ],
        series: [
            {
                text: 'Apple Music',
                values: [25, 44, 55, 40, 43, 55, 80, 95, 125, 200],
                lineColor: '#9c27b0',
                marker: {
                    backgroundColor: '#ba68c8',
                },
            },
            {
                text: 'Google Play',
                values: [15, 24, 25, 20, 23, 25, 50, 55, 75, 100],
                lineColor: '#ffea00',
                marker: {
                    backgroundColor: '#ffea00',
                },
            },
            {
                text: 'Spotify',
                values: [125, 144, 155, 140, 143, 155, 180, 195, 1125, 1200],
                lineColor: '#00e676',
                marker: {
                    backgroundColor: '#00e676',
                },
            },
            {
                text: 'Youtube UGC',
                values: [115, 124, 135, 120, 133, 135, 150, 155, 1025, 1400],
                lineColor: '#f50057',
                marker: {
                    backgroundColor: '#f50057',
                },
            },
            {
                text: 'Youtube Official Music Videos',
                values: [145, 164, 125, 125, 131, 132, 140, 145, 1015, 1100],
                lineColor: '#f44336',
                marker: {
                    backgroundColor: '#f44336',
                },
            },
        ],
    };
    let previousGuideObject = null;
    // when user is moving the mouse around
    zingchart.bind('zc', 'mousemove', function (e) {
        // if we left the plotarea
        if (!e.plotarea && previousGuideObject) {
            zingchart.exec('zc', 'setguide', {
                keyvalue: previousGuideObject.items[0].keyvalue,
            });
        }
    });
    // when user mouse leaves full chart
    zingchart.bind('zc', 'mouseout', function (e) {
        zingchart.exec('zc', 'setguide', {
            keyvalue: previousGuideObject.items[0].keyvalue,
        });
    });
    // save the guide position for when mouse
    // leaves chart
    zingchart.bind('zc', 'guide_mousemove', function (e) {
        previousGuideObject = e;
    });
    // render chart
    zingchart.render({
        id: 'zc',
        data: chartConfig,
        height: '100%',
        width: '100%',
    });
});

.zc-html, .zc-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  margin:2rem;
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Customize radar chart to supply a direction and speed. 11/281 Financial Dashboard

Dynamic Labels on Legend and Crosshair

Related Documentation: