gionkunz / chartist-plugin-threshold

Threshold Plugin for Chartist.js
Do What The F*ck You Want To Public License
29 stars 38 forks source link

Bars disappear #14

Open woodengineer opened 6 years ago

woodengineer commented 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;
}
blackmambahk commented 6 years ago

I have same problem