javascript - Set bulletBorderColor to lineColor by default in amCharts -
according amcharts documentation, if bulletbordercolor isn't set, default linecolor. doesn't seem working. building theme team use don't have worry setting colors every time generate chart. have workaround, or solution this?
codepen: http://codepen.io/anon/pen/mwbyvl
code:
amcharts.makechart("line-chart-fw", { "type": "serial", "theme": "sailthru", "margintop": 0, "marginright": 0, "marginleft": 0, "marginbottom": 0, "responsive": { "enabled": true }, "pathtoimages": "js/amcharts/images/", "graphs": [{ "title": "yesterday", "id": "g2", "balloontext": "", "type": "smoothedline", "valuefield": "value2" }, { "title": "today", "id": "g1", "balloontext": "<b>[[category]]</b><br><span style='font-size:11px;'>today: [[value]]</span><br><span style='font-size:11px;'>yesterday: [[value2]]</span>", "type": "smoothedline", "valuefield": "value" }], "chartcursor": { "valuelineenabled": false, "valuelineballoonenabled": false, "valuelinealpha": 0.5, "fullwidth": true, "categoryballoonenabled": false }, "legend": { "marginleft": 0, "marginright": 0, "margintop": 0, "marginbottom": 0, "width": 140, "labeltext": "[[title]]", "valuetext": "", }, "categoryfield": "year", "categoryaxis": { "parsedates": false, "minorgridalpha": 0.1, "labelsenabled": true, "inside": false, }, "dataprovider": [{ "year": "12 am", "value": 5, "value2": 10 }, { "year": "1 am", "value": 10, "value2": 5 }, { "year": "2 am", "value": 15, "value2": 20 }, { "year": "3 am", "value": 5, "value2": 10 }, { "year": "4 am", "value": 12, "value2": 18 }, { "year": "5 am", "value": 16, "value2": 12 }, { "year": "6 am", "value": 7, "value2": 5 }, { "year": "7 am", "value": 20, "value2": 15 }, { "year": "8 am", "value": 25, "value2": 20 }, { "year": "9 am", "value": 20, "value2": 15 }, { "year": "10 am", "value": 20, "value2": 8 }, { "year": "11 am", "value": 60, "value2": 45 }, { "year": "12 pm", "value": 80, "value2": 70 }, { "year": "1 pm", "value": 95, "value2": 80 }, { "year": "2 pm", "value": 80, "value2": 90 }, { "year": "3 pm", "value": 40, "value2": 50 }, { "year": "4 pm", "value": 60, "value2": 20 }, { "year": "5 pm", "value2": 35 }, { "year": "6 pm", "value2": 20 }, { "year": "7 pm", "value2": 10 }, { "year": "8 pm", "value2": 20 }, { "year": "9 pm", "value2": 5 }, { "year": "10 pm", "value2": 5 }, { "year": "11 pm", "value2": 10 }], "valueaxes": [{ "axisalpha": 0, "position": "left", "labelsenabled": true, "inside": true, "ignoreaxiswidth": true, "axistitleoffset": 0, "maximum": 100, }] });
the documentation might not straightforward. technically bullet border use line's color, if not override bullet color bulletcolor
, seem doing.
to work around use uselinecolorforbulletborder
. (set true)
so relevant part of theme file should this:
amgraph: { linealpha: 1, bulletborderalpha: 1, bulletcolor: "#ffffff", linethickness: 1.5, fillalphas: 0.05, bulletsize: 6, bulletborderthickness: 1.5, bulletcolor: "#ffffff", bulletborderalpha: 1, bullet: "round", minorgridenabled: false, uselinecolorforbulletborder: true }
p.s. noticed have lot of trailing commas in theme file (a comma after last property in object). while modern browsers can handle it, older ones fail syntax error. might want fixed.
Comments
Post a Comment