How can i set more than 1 color set for each graph?

[vincent]

<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“greenShades”,
[//colorSet Array
“#2F4F4F”,
“#008080”,
“#2E8B57”,
“#3CB371”,
“#90EE90”,
“#003A00”,
]);

CanvasJS.addColorSet(“RedShades”,
[//colorSet Array
“#F08080”,
“#E9967A”,
“#DC143C”,
“#FF0000”,
“#B22222”,
“#8B0000”,
]);

var chart = new CanvasJS.Chart(“chartContainer”,
{ colorSet: “greenShades”,
colorSet: “RedShades”,

title:{
text: “Instant Traffic Volumn Monitoring”
},

legend: {
interval:1,
intervalType: “hour”,
cursor: “pointer”,
itemclick: function (e) {
//console.log(“legend click: ” + e.dataPointIndex);
//console.log(e);
var data = e.chart.options.data;
for(var i = 0; i < data.length; i++){
data[i].visible = false;
}
e.dataSeries.visible = true;
e.chart.render();
}
},
axisY:
{
title: “Traffic Count”,
interval:2,
},

axisX:
{
title: “Lane Code”,
},
data: [{
colorSet:”#greenShades”,
showInLegend: true,
//visible: false,
type: “column”,
legendText: “14:00″,
dataPoints: [{
y: 5,
label:”LN001″
}, {
y: 7,
label:”LN002″

}, {
y: 9,
label:”LN003″
}, {
y: 8,
label:”LN004″

}, {
y: 14,
label:”LN005″
}, {
y: 15,
label:”LN006”
},

]
}, {
showInLegend: true,
colorSet: “RedShades”,
visible: false,
legendText: “15:00”,
type: “line”,
dataPoints: [ {
y: 3,
label:”LN001″
}, {
y: 4,
label:”LN002″
}, {
y: 7,
label:”LN003″
}, {
y: 11,
label:”LN004″
}, {
y: 15,
label:”LN005″
}, {
y: 4,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “16:00”,
type: “spline”,
dataPoints: [ {
y: 4,
label:”LN001″
}, {
y: 8,
label:”LN002″
}, {
y: 9,
label:”LN003″
}, {
y: 13,
label:”LN004″
}, {
y: 15,
label:”LN005″
}, {
y: 14,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “17:00”,
type: “stepLine”,
dataPoints: [ {
y: 13,
label:”LN001″
}, {
y: 6,
label:”LN002″
}, {
y: 7,
label:”LN003″
}, {
y: 10,
label:”LN004″
}, {
y: 13,
label:”LN005″
}, {
y: 14,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “18:00”,
type: “stepArea”,
dataPoints: [ {
y: 3,
label:”LN001″
}, {
y: 5,
label:”LN002″
}, {
y: 9,
label:”LN003″
}, {
y: 8,
label:”LN004″
}, {
y: 6,
label:”LN005″
}, {
y: 2,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “19:00”,
type: “area”,
dataPoints: [ {
y: 1,
label:”LN001″
}, {
y: 2,
label:”LN002″
}, {
y: 4,
label:”LN003″
}, {
y: 6,
label:”LN004″
}, {
y: 8,
label:”LN005″
}, {
y: 5,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “20:00”,
type: “splineArea”,
dataPoints: [ {
y: 3,
label:”LN001″
}, {
y: 6,
label:”LN002″
}, {
y: 8,
label:”LN003″
}, {
y: 11,
label:”LN004″
}, {
y: 14,
label:”LN005″
}, {
y: 1,
label:”LN006″
},
]
},
{
showInLegend: true,
visible: false,
legendText: “20:00”,
type: “column”,
dataPoints: [ {
y: 5,
label:”LN001″
}, {
y: 7,
label:”LN002″
}, {
y: 9,
label:”LN003″
}, {
y: 8,
label:”LN004″
}, {
y: 15,
label:”LN005″
}, {
y: 14,
label:”LN006″
},
]
},{
showInLegend: true,
visible: false,
legendText: “20:00”,
type: “line”,
dataPoints: [{
y: 3,
label:”LN001″
}, {
y: 2,
label:”LN002″
}, {
y: 1,
label:”LN003″
}, {
y: 6,
label:”LN004″
}, {
y: 5,
label:”LN005″
}, {
y: 4,
label:”LN006″
}, ]
}]
});

chart.render();}
</script>

[Vishwas R]

@vincent,

You can have one colorSet within a chart, as of now. However if you are trying to have different colorSets for each dataSeries, you can try setting color in dataPoint level. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS