Help Center - Multiple Crosshair Plot Labels

<!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"];
    var myConfig = {
      type: 'line',
      title: {
        text: 'Multiple Crosshair Plot Labels',
        fontFamily: 'Georgia'
      },
      crosshairX: {
        plotLabel: {
          text: '<strong>%t:</strong> %v m/s',
          thousandsSeparator: ',',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '5px',
          multiple: true //include this attribute.
        },
        scaleLabel: {
          text: '%v seconds',
          fontColor: 'black',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '5px',
        },
        lineColor: 'black',
        lineWidth: 1
      },
      scaleX: {
        values: '0:16:2',
        //decimals: 1,
        label: {
          text: 'Time (s)'
        },
        item: {
          fontSize: 10
        },
        guide: {
          visible: true,
          lineColor: 'black',
          lineStyle: 'dotted',
          alpha: 1
        }
      },
      scaleY: {
        progression: 'log',
        logBase: 10,
        thousandsSeparator: ',',
        label: {
          text: 'Velocity (m/s)'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid',
          lineWidth: 2,
          lineColor: 'gray',
          alpha: 0.9
        },
        minorTicks: 4,
        minorGuide: {
          lineStyle: 'solid',
          lineWidth: 1,
          lineColor: 'gray',
          alpha: 0.9
        }
      },
      plot: {
        aspect: 'spline',
        tooltip: {
          visible: false
        }
      },
      plotarea: {
        marginLeft: 'dynamic',
        marginBottom: 'dynamic'
      },
      series: [{
          values: [
            [0, 0],
            [2, 5],
            [4, 66],
            [6, 230],
            [8, 590],
            [10, 1500],
            [12, 9000],
            [14, 40000],
            [16, 660000]
          ],
          text: 'Rocket A',
          lineColor: '#0066cc',
          marker: {
            type: 'square',
            backgroundColor: '#0066cc'
          },
          guideLabel: {
            fontColor: '#0066cc'
          }
        },
        {
          values: [
            [0, 0],
            [2, 3],
            [4, 30],
            [6, 200],
            [8, 1100],
            [10, 5000],
            [12, 31000],
            [14, 99000],
            [16, 350000]
          ],
          text: 'Rocket B',
          lineColor: '#cc0000',
          marker: {
            type: 'diamond',
            backgroundColor: '#cc0000'
          },
          guideLabel: {
            fontColor: '#cc0000'
          }
        },
        {
          values: [
            [0, 0],
            [2, 4],
            [4, 14],
            [6, 102],
            [8, 3200],
            [10, 32200],
            [12, 111000],
            [14, 311000],
            [16, 500000]
          ],
          text: 'Rocket B',
          lineColor: '#009933',
          marker: {
            type: 'triangle',
            backgroundColor: '#009933'
          },
          guideLabel: {
            fontColor: '#009933'
          }
        },
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      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>

var myConfig = {
  type: 'line',
  title: {
    text: 'Multiple Crosshair Plot Labels',
    fontFamily: 'Georgia'
  },
  crosshairX: {
    plotLabel: {
      text: '<strong>%t:</strong> %v m/s',
      thousandsSeparator: ',',
      backgroundColor: 'white',
      borderWidth: 1,
      borderColor: 'gray',
      borderRadius: '5px',
      multiple: true //include this attribute.
    },
    scaleLabel: {
      text: '%v seconds',
      fontColor: 'black',
      backgroundColor: 'white',
      borderWidth: 1,
      borderColor: 'gray',
      borderRadius: '5px',
    },
    lineColor: 'black',
    lineWidth: 1
  },
  scaleX: {
    values: '0:16:2',
    //decimals: 1,
    label: {
      text: 'Time (s)'
    },
    item: {
      fontSize: 10
    },
    guide: {
      visible: true,
      lineColor: 'black',
      lineStyle: 'dotted',
      alpha: 1
    }
  },
  scaleY: {
    progression: 'log',
    logBase: 10,
    thousandsSeparator: ',',
    label: {
      text: 'Velocity (m/s)'
    },
    item: {
      fontSize: 10
    },
    guide: {
      lineStyle: 'solid',
      lineWidth: 2,
      lineColor: 'gray',
      alpha: 0.9
    },
    minorTicks: 4,
    minorGuide: {
      lineStyle: 'solid',
      lineWidth: 1,
      lineColor: 'gray',
      alpha: 0.9
    }
  },
  plot: {
    aspect: 'spline',
    tooltip: {
      visible: false
    }
  },
  plotarea: {
    marginLeft: 'dynamic',
    marginBottom: 'dynamic'
  },
  series: [{
      values: [
        [0, 0],
        [2, 5],
        [4, 66],
        [6, 230],
        [8, 590],
        [10, 1500],
        [12, 9000],
        [14, 40000],
        [16, 660000]
      ],
      text: 'Rocket A',
      lineColor: '#0066cc',
      marker: {
        type: 'square',
        backgroundColor: '#0066cc'
      },
      guideLabel: {
        fontColor: '#0066cc'
      }
    },
    {
      values: [
        [0, 0],
        [2, 3],
        [4, 30],
        [6, 200],
        [8, 1100],
        [10, 5000],
        [12, 31000],
        [14, 99000],
        [16, 350000]
      ],
      text: 'Rocket B',
      lineColor: '#cc0000',
      marker: {
        type: 'diamond',
        backgroundColor: '#cc0000'
      },
      guideLabel: {
        fontColor: '#cc0000'
      }
    },
    {
      values: [
        [0, 0],
        [2, 4],
        [4, 14],
        [6, 102],
        [8, 3200],
        [10, 32200],
        [12, 111000],
        [14, 311000],
        [16, 500000]
      ],
      text: 'Rocket B',
      lineColor: '#009933',
      marker: {
        type: 'triangle',
        backgroundColor: '#009933'
      },
      guideLabel: {
        fontColor: '#009933'
      }
    },
  ]
};

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