jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
44 lines (40 loc) • 2.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id='Description'>
This is an example of React Chart annotations and conditional labels and colors. You can see how to set the type, the values, the color and the offset of the annotation. You can also see how to change the color and the border of the labels above a threshold value.
</title>
<meta name="description" content="This React Chart demo showcases Chart's annotations functionality'" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.annotations.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.api.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<style type="text/css">
.redLabel {
fill: #FF0000;
color: #FF0000;
font-size: 11px;
font-family: Verdana;
}
.greenLabel {
fill: #89A54E;
color: #89A54E;
font-size: 11px;
font-family: Verdana;
}
</style>
</head>
<body>
<div class="example-description" style="margin-bottom:3em">
This is an example of React Chart annotations and conditional labels and colors. You can see how to set the type, the values, the color and the offset of the annotation. You can also see how to change the color and the border of the labels above a threshold value.
</div>
<div id="app"></div>
<script src="../build/chart_chartannotations.bundle.js"></script>
</body>
</html>