[json] graphset > options > outlier > tooltip > topState

<!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>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'boxplot',
      options: {
        outlier: {
          tooltip: {
            text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>',
            topState: {
              backgroundColor: 'red',
              offsetX: 10,
              offsetY: 10,
            }
          },
          marker: {
            type: 'circle',
            backgroundColor: '#ff0'
          },
          hoverMarker: {
            backgroundColor: 'red'
          },
        },
        box: {
          barWidth: 0.5,
          tooltip: {
            text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>'
          }
        },
        lineMinLevel: {
          lineColor: '#f00',
          lineWidth: 2,
        },
        lineMaxLevel: {
          lineColor: '#0f0',
          lineWidth: 2,
        },
        lineMinConnector: {
          lineWidth: 2,
          lineColor: '#f00'
        },
        lineMaxConnector: {
          lineColor: '#00f',
          lineWidth: 4,
        },
        lineMedianLevel: {
          alpha: 0.5
        }
      },
      plotarea: {
        margin: '100'
      },
      scaleX: {
        guide: {
          visible: false
        },
        label: {
          text: 'Experiment No.'
        },
        values: ['1', '2', '3', '4', '5'],
        item: {
          wrapText: true
        }
      },
      scaleY: {
        minValue: 'auto',
        guide: {
          lineStyle: 'solid'
        },
        label: {
          text: 'Observations'
        },
        item: {
          wrapText: true
        }
      },
      tooltip: {
        fontSize: 11,
        align: 'left',
        borderRadius: 7,
        borderWidth: 1,
        backgroundColor: '#fff',
        alpha: 0.9,
        padding: 10,
        color: '#000'
      },
      plot: {},
      series: [{
        dataBox: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 836, 871, 950],
          [834, 856, 864, 882, 910]
        ],
        dataOutlier: [
          [0, 644],
          [1, 718],
          [4, 951],
          [3, 969],
          [2, 944]
        ]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      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>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

let chartConfig = {
  type: 'boxplot',
  options: {
    outlier: {
      tooltip: {
        text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>',
        topState: {
          backgroundColor: 'red',
          offsetX: 10,
          offsetY: 10,
        }
      },
      marker: {
        type: 'circle',
        backgroundColor: '#ff0'
      },
      hoverMarker: {
        backgroundColor: 'red'
      },
    },
    box: {
      barWidth: 0.5,
      tooltip: {
        text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>'
      }
    },
    lineMinLevel: {
      lineColor: '#f00',
      lineWidth: 2,
    },
    lineMaxLevel: {
      lineColor: '#0f0',
      lineWidth: 2,
    },
    lineMinConnector: {
      lineWidth: 2,
      lineColor: '#f00'
    },
    lineMaxConnector: {
      lineColor: '#00f',
      lineWidth: 4,
    },
    lineMedianLevel: {
      alpha: 0.5
    }
  },
  plotarea: {
    margin: '100'
  },
  scaleX: {
    guide: {
      visible: false
    },
    label: {
      text: 'Experiment No.'
    },
    values: ['1', '2', '3', '4', '5'],
    item: {
      wrapText: true
    }
  },
  scaleY: {
    minValue: 'auto',
    guide: {
      lineStyle: 'solid'
    },
    label: {
      text: 'Observations'
    },
    item: {
      wrapText: true
    }
  },
  tooltip: {
    fontSize: 11,
    align: 'left',
    borderRadius: 7,
    borderWidth: 1,
    backgroundColor: '#fff',
    alpha: 0.9,
    padding: 10,
    color: '#000'
  },
  plot: {},
  series: [{
    dataBox: [
      [760, 801, 848, 895, 965],
      [733, 853, 939, 980, 1080],
      [714, 762, 817, 870, 918],
      [724, 802, 836, 871, 950],
      [834, 856, 864, 882, 910]
    ],
    dataOutlier: [
      [0, 644],
      [1, 718],
      [4, 951],
      [3, 969],
      [2, 944]
    ]
  }]
};

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