Change the color of the chart in the AmCharts file
I want to change the color of the charts in Stock-Chart. There is more than one chart in the bottom pane. These charts should be in different colors.
The snippet is 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);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = 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 the color of all the graphs, i need different color for 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 I change the color in the datasets then it changes the color of all the plots. I want to give them a different color. There are two graphs in the bottom panel. One is a column and the other is a row. They should also have a different color.
I tried all the color properties mentioned in the amCharts documentation but nothing seems to work ( Link ). How to do it?
+3
source to share
2 answers
You can set it useDataSetColors
to false in each stockGraph file so that each graph has a different color. Setting this parameter to false will also allow you to directly set the color inside the plot object via your fillColors
and lineColor
, as well as their associated colorField properties, if you have colors defined in your data.
stockGraphs: [{
useDataSetcolors: false, //set for each stockGraph object where you don't
//want the graph to use the dataSet color and generate its own.
// ...
}, {
useDataSetcolors: false,
}]
Demo updated:
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);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = 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 that this looks for colors in your data for eacc point. use fillColors instead if you want to change the color directly for all 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>
+4
source to share
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);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = 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 the color of all the graphs, i need different color for 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;
}
.amChartsPanel rect.amcharts-graph-column-front.amcharts-graph-column-element {
fill: #000;
stroke: #000;
}
<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>
+1
source to share