Cihan
Cihan

Reputation: 53

AmChart: Setting lineColor for a Graph Failed

I am trying to get a multi-line chart using StockChart. First I tried without specifically setting color properties, but the lines I got were all orange. So I tried to force the graphs to have different colors, using the "colors" array in StockPanel class. This works for setting legendColor but failed when setting the line colors.

Did I do anything silly? How can I trigger the color auto-assigning?

Here is my code:

var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = true;

var graph1;

$.each($("#building-select").val(), function(index, value) {
    graph1 = new AmCharts.StockGraph();
    graph1.valueField = buildingNames[value];
    graph1.legendColor = stockPanel1.colors[index]; // this works
    graph1.lineColor = stockPanel1.colors[index];   // this does not work
    graph1.title = buildingNames[value];
    graph1.bulletBorderColor = "#FFFFFF";
    graph1.bulletBorderAlpha = 1;                                       
    graph1.balloonText = buildingNames[value] + ":<b>$[[value]]</b>";
    stockPanel1.addStockGraph(graph1);
});

It is what I get from the code. Notice that legend colors are set accordingly but line colors are still orange. Legend colors are fine, but line colors are all orange

Update:

I replaced the creation code with JSON format, adding "useDataSetColors: false" config. It works for the initial line.

stockGraphs: [{
    id: "g1",
    valueField: $("#type-select").val(),
    comparable: true,
    useDataSetColors: false,
    lineColor: Colors[0],    // this works
    compareField: $("#type-select").val(),
    balloonText: "[[title]]:<b>$[[value]]</b>",
    compareGraphBalloonText: "[[title]]:<b>$[[value]]</b>"
}]

For ongoing added lines, I assigned the color property to datasets directly:

$.each($(this).val(), function(index, value) {
    chartDataSets[value].color = Colors[index];
    if (index == 0) {
        chart.mainDataSet = chartDataSets[value];
    } else {
        chartDataSets[value].compared = true;
    }
});

I guess it's just some work-around, please let me know if there are better ways, many thanks.

Plus, how can I add axis labels and re-position the legend to the bottom? The configs which work for regular amCharts seem not working in StockCharts.

Upvotes: 4

Views: 3164

Answers (1)

zeroin
zeroin

Reputation: 6025

Try to set graph.useDataSetColors = false;

Upvotes: 3

Related Questions