Open woodengineer opened 6 years ago
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; }
I have same problem
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
And here is the sample-styles.css