chartist-plugin-threshold
chartist-plugin-threshold copied to clipboard
Published
20 hours ago •
gionkunz
gionkunz
Bars disappear
Hello first of thanks for this great library! My problem, I cannot get the threshold plugin to work in my bar graph. As soon as I enable the plugin my bars disappear. Below is my HTML and CSS. Thanks! Alex
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="chart/chartist.css">
<link rel="stylesheet" type="text/css" href="chart/threshold-styles.css">
<link rel="stylesheet" type="text/css" href="chart/sample-styles.css">
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.6.4.min.js"></script>
<!--Reference the chartist library (Chart). -->
<script type="text/javascript" src="chart/chartist.min.js"></script>
<script type="text/javascript" src="chart/chartist-plugin-axistitle.js"></script>
<script type="text/javascript" src="chart/chartist-plugin-targetline.js"></script>
<script type="text/javascript" src="chart/chartist-plugin-threshold.js"></script>
</head>
<body>
<script>
$(function () {
var options = ({ width: 600, height: 200, high: 500 ,
plugins: [Chartist.plugins.ctAxisTitle({
axisX: {
axisTitle: 'Horizontal Axis Label',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 30
},
textAnchor: 'middle'
},
axisY: {
axisTitle: 'Vertical Axis Label',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: -1
},
flipTitle: false
}
})
, Chartist.plugins.ctTargetLine({ value: 275 })
<!-- , Chartist.plugins.ctThreshold({ threshold: 200 }) //Create threshold does not work -->
]
});
var chart = new Chartist.Bar('.ct-chart', { labels: [1, 2, 3, 4, 5], series: [[450, 200, 220, 300, 400]] }, options);
});
</script>
<div style="position: fixed; top: 30px; left: 30px" class="ct-chart"></div>
</body>
</html>
And here is the sample-styles.css
.ct-target-line {
stroke: green;
stroke-width: 2px;
}
.ct-line.ct-threshold-above, .ct-point.ct-threshold-above, .ct-bar.ct-threshold-above {
stroke: #f05b4f;
}
.ct-line.ct-threshold-below, .ct-point.ct-threshold-below, .ct-bar.ct-threshold-below {
stroke: #59922b;
}
.ct-area.ct-threshold-above {
fill: #f05b4f;
}
.ct-area.ct-threshold-below {
fill: #59922b;
}
