Rohit Bisht Rohit Bisht - 2 years ago 194
CSS Question

Change the color of graph in stockchart of AmCharts

I want to change the color of the charts in Stock-Chart. There are more than one chart in the bottom panel. These charts should have different color.

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 color in datasets then it changes all the graphs color. I want to give them different color. There are two graphs in bottom panel. One is column and another is line. They should also have different color.

I tried all the color properties given in the amCharts documentation but nothing is working(Ref.). How to do this thing?

Answer Source

You can set useDataSetColors to false in each stockGraph to make it so that each graph has a different color. Setting this to false will also allow you to directly set the color inside the graph object through their own 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,
}]

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);

  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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download