Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bars disappear #14

Open
woodengineer opened this issue Mar 15, 2018 · 1 comment
Open

Bars disappear #14

woodengineer opened this issue Mar 15, 2018 · 1 comment

Comments

@woodengineer
Copy link

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
Copy link

I have same problem

primus852 added a commit to primus852/chartist-plugin-threshold that referenced this issue May 22, 2018
@primus852
maskUnits: 'userSpaceOnUse'
5c51697 
Deals with [Issue gionkunz#14](gionkunz#14)
@primus852 primus852 mentioned this issue May 22, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@blackmambahk @woodengineer