ChartistJSF Extend - jsf

Question

So, I'm using ChartistJSF (based on Chartist), the jsf version is kinda simples, so I'm trying to use some plugins offered in the javascript version, but I'm trying to figure out how to do this, because every chart "module" in JSF has a extend where I can put some extra configurations, but this one doesn't have. Can you guys help me?

Answer 1

Since 3.0, ChartistJSF supports plugins, here's an example of chartist-plugin-threshold:
xhtml
<ct:chart id="lineChart" type="line" model="#{chartDataBean.pluginsModel}"
plugins="myPlugins"
styleClass="example-plugin-threshold">
</ct:chart>
js
<script>
var myPlugins =
[
Chartist.plugins.ctThreshold({
threshold: 4
})
];
</script>
css
.example-plugin-threshold .ct-line {
stroke-dasharray: 5px;
animation: dashoffset 1s linear infinite;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-above {
stroke: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-below {
stroke: #59922b;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-above {
fill: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-below {
fill: #59922b;
}
#-webkit-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-moz-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-ms-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
Result: