var chart = new CanvasJS.Chart("container",
{
.
.
axisY:{
stripLines:[
{
startValue:25,
endValue:32,
color:"#d8d8d8",
label : "Label 1",
labelFontColor: "#a8a8a8",
}
]
},
.
.
});
chart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| stripLines | value | Number | null | 12 |
| stripLines | startValue | Number | null | 20 |
| stripLines | endValue | Number | null | 30 |
| stripLines | thickness | Number | 1 | 5,10,20 |
| stripLines | color | String | “#FF7300” | “green”,”#23EA23″ |
| stripLines | label | String | “” (empty string) | “Threshold”,”Target” |
| stripLines | labelPlacement | String | “inside” | “inside”,”outside” |
| stripLines | labelAlign | String | “far” | “far”,”center”,”near” |
| stripLines | labelWrap | Boolean | true | true,false |
| stripLines | labelMaxWidth | Number | Automatically Calculated based on label length | 100, 200… |
| stripLines | labelBackgroundColor | String | “transparent” | “red”,”#fabd76″ |
| stripLines | labelFontFamily | String | “Trebuchet MS, Helvetica, sans-serif” | “Arial, Trebuchet MS, Tahoma, sans-serif” |
| stripLines | labelFontColor | String | “orange” | “blue”,”#4135e9″ |
| stripLines | labelFontSize | Number | 12 | 18,19,20,22 |
| stripLines | labelFontWeight | String | “normal” | “lighter”,”normal”,”bold”,”bolder” |
| stripLines | labelFontStyle | String | “normal” | “normal”,”oblique”,”italic” |
| stripLines | showOnTop | Boolean | false | true, false |
| stripLines | lineDashType | String | “solid” | “dot”, “dash” etc. |
| stripLines | opacity | Number | null | .1, .2, .5 etc. |
| stripLines | labelFormatter | Function |
Also See:
Comments 20
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
How to make multiple strip lines at a regular interval using javascript for loop?
Sushant,
Please refer this example.
How to make bold character in label of stripline. For Example ,” Musical Class ( 45 student ) ” . i want “45 student” in bracket is bold
zadwhite,
It is not possible yet.
Any chance of including the “labelAngle” attribute to the stripline object?
As of now labelAngle for stripline will be same as axis’s labelAngle.
Hi !
Just a question : Can we limit a stripline on axis X ?
Example :
axisY:{
stripLines:[
{
startValue:25,
endValue:32,
color:”#d8d8d8″
limitAxisX : 1940 // Strip line stops at year 1940
}
]
}
Thank you in advance for your answers and your really useful library ;).
Sorry, this is not possible as of now.
Thanks to your reply. I’ll try to realize in another way. :)
This is another nice feature I was looking for and it is there!
Great library!
If I have multiple striplines, how to set priority as which one to be shown on top in case all the lines overlap?
StripLines are rendered in the order of appearance in StripLines array. So, you can prioritize them according to your requirement.
How do we ensure stripLines are within the automatically calculated x- or y- axis range? I want the graph to always include my stripLines because they are goal markers so it would be helpful for the end user to know if they are above/below their goals.
Jim Dunne,
As of now you can set axis minimum and maximum to make sure graph always include stripLines.
stripLines:[
{
value:new Date(“”),
color:”#000000″,
showOnTop:”True”,
label: ” Last”,
labelPlacement:”inside”,
labelFontColor: “#a8a8a8”
}
]
the labelPlacement is not working for me I want my label to be inside instead of outside…
a little help here pls.
Kelvin,
In javascript instance of Date with empty string is treated as Invalid Date. So, removing the empty string inside Date constractor should show the stripLine.
It is possible to dynamic update stripLines value?
Martin Potančok,
Yes, you can update stripline value by using chart.options (eg: chart.options.axisX.stripLines[0].value) and render it by calling chart.render().
Please refer this example.
Is it possible to add showOnTop:true to multiple striplines?? I tried adding the feature to two striplines(at different values) and only the second one came on top while the first stripline completely disappeared….
Subhannita,
Kindly download and check with this intermediate build. The issue has been fixed and will be bundled in our next release. Till then you can use this intermediate build.