javascript - Change the color of graph in stockchart of AmCharts -
i want change color of charts in stock-chart. there more 1 chart in bottom panel. these charts should have different color.
snippet here:
var chartdata = generatechartdata(); function generatechartdata() { var chartdata = []; var firstdate = new date(2012, 0, 1); firstdate.setdate(firstdate.getdate() - 1000); firstdate.sethours(0, 0, 0, 0); (var = 0; < 1000; i++) { var newdate = new date(firstdate); newdate.sethours(0, i, 0, 0); var = math.round(math.random() * (40 + i)) + 100 + i; var b = math.round(math.random() * (40 + i)) + 100 + i; chartdata.push({ "date": newdate, "value": a, "volume": b }); } return chartdata; } var chart = amcharts.makechart("chartdiv", { "type": "stock", "theme": "light", "categoryaxessettings": { "minperiod": "mm" }, "datasets": [{ "color":"red", //it changes color of graphs, need different color bottom panel. "fieldmappings": [{ "fromfield": "value", "tofield": "value" }, { "fromfield": "volume", "tofield": "volume" }], "dataprovider": chartdata, "categoryfield": "date" }], "panels": [{ "showcategoryaxis": false, "title": "value", "percentheight": 70, "stockgraphs": [{ "fillalphas": 0, "fillcolors":"red", "id": "g1", "valuefield": "value", "type": "smoothedline", "linethickness": 2, "bullet": "round", }], "stocklegend": { "valuetextregular": " ", "markertype": "none" } }, { "title": "volume", "percentheight": 30, "valueaxes": [{ "id": "valueaxis-1", "title": "axis title" }], "stockgraphs": [{ "valuefield": "volume", "type": "column", "cornerradiustop": 2, "fillalphas": 1, "fillcolorsfield":"red" }, { "valuefield": "value", //"type": "column", "cornerradiustop": 5,"fillcolorsfield":"red" } ], "stocklegend": { "valuetextregular": " ", "markertype": "none" } }], "chartscrollbarsettings": { "graph": "g1", "useperiod": "10mm", "position": "top" }, "chartcursorsettings": { "valueballoonsenabled": true }, "periodselector": { "position": "top", "dateformat": "yyyy-mm-dd jj:nn", "inputfieldwidth": 150, "periods": [{ "period": "hh", "count": 1, "label": "1 hour", "selected": true }, { "period": "hh", "count": 2, "label": "2 hours" }, { "period": "hh", "count": 5, "label": "5 hour" }, { "period": "hh", "count": 12, "label": "12 hours" }, { "period": "max", "label": "max" }] }, "panelssettings": { "useprefixes": true }, "export": { "enabled": true, "position": "bottom-right" } });#chartdiv { width: 100%; height: 400px; }<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/amstock.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div> if change color in datasets changes graphs color. want give them different color. there 2 graphs in bottom panel. 1 column , line. should have different color.
i tried color properties given in amcharts documentation nothing working(ref.). how thing?
you can set usedatasetcolors false in each stockgraph make each graph has different color. setting false allow directly set color inside graph object through own fillcolors , linecolor, associated *colorfield properties if have colors defined in data.
stockgraphs: [{ usedatasetcolors: false, //set each stockgraph object don't //want graph use dataset color , generate own. // ... }, { usedatasetcolors: false, }] updated demo:
var chartdata = generatechartdata(); function generatechartdata() { var chartdata = []; var firstdate = new date(2012, 0, 1); firstdate.setdate(firstdate.getdate() - 1000); firstdate.sethours(0, 0, 0, 0); (var = 0; < 1000; i++) { var newdate = new date(firstdate); newdate.sethours(0, i, 0, 0); var = math.round(math.random() * (40 + i)) + 100 + i; var b = math.round(math.random() * (40 + i)) + 100 + i; chartdata.push({ "date": newdate, "value": a, "volume": b }); } return chartdata; } var chart = amcharts.makechart("chartdiv", { "type": "stock", "theme": "light", "categoryaxessettings": { "minperiod": "mm" }, "datasets": [{ "color": "red", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }, { "fromfield": "volume", "tofield": "volume" }], "dataprovider": chartdata, "categoryfield": "date" }], "panels": [{ "showcategoryaxis": false, "title": "value", "percentheight": 70, "stockgraphs": [{ "fillalphas": 0, "fillcolors": "red", "id": "g1", "valuefield": "value", "type": "smoothedline", "linethickness": 2, "bullet": "round", }], "stocklegend": { "valuetextregular": " ", "markertype": "none" } }, { "title": "volume", "percentheight": 30, "valueaxes": [{ "id": "valueaxis-1", "title": "axis title" }], "stockgraphs": [{ "usedatasetcolors": false, "valuefield": "volume", "type": "column", "cornerradiustop": 2, "fillalphas": 1, "fillcolorsfield": "red" //note looks colors in data eacc point. use fillcolors instead if want change color directly points }, { "usedatasetcolors": false, "valuefield": "value", //"type": "column", "cornerradiustop": 5, "fillcolorsfield": "red" } ], "stocklegend": { "valuetextregular": " ", "markertype": "none" } } ], "chartscrollbarsettings": { "graph": "g1", "useperiod": "10mm", "position": "top" }, "chartcursorsettings": { "valueballoonsenabled": true }, "periodselector": { "position": "top", "dateformat": "yyyy-mm-dd jj:nn", "inputfieldwidth": 150, "periods": [{ "period": "hh", "count": 1, "label": "1 hour", "selected": true }, { "period": "hh", "count": 2, "label": "2 hours" }, { "period": "hh", "count": 5, "label": "5 hour" }, { "period": "hh", "count": 12, "label": "12 hours" }, { "period": "max", "label": "max" }] }, "panelssettings": { "useprefixes": true }, "export": { "enabled": true, "position": "bottom-right" } });#chartdiv { width: 100%; height: 400px; }<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/amstock.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div>
Comments
Post a Comment