I am new to fusion charts and understand just enough to make them. Currently I was giving a task to make a fusion chart and insert a gray area, the trend zone. This has worked out perfectly but I had to add a display value that says Target Zone. The current color of the display value is the same as the zone. I want my display value to be a different color compared to the trend zone, how could I implement that into my code to achieve this?
This is a minimal version of my fusion chart that shows how I have my trend zone set up:
FusionCharts.ready(function() {
var percentChart = new FusionCharts({
"dataSource": {
"chart": {
"trendValueFontSize": "11",
"trendValueFontBold": "1",
"trendValueFontItalic": "1",
"trendValueAlpha": "80"
},
"trendlines": [{
"line": [{
"isTrendZone": "1",
"startvalue": "92",
"endvalue": "108",
"color": "C2C2C2",
"valueOnRight": "1",
"displayvalue": "Target Range"
}]
}]
}
});
percentChart.render();
});
Found a way to make color of Trend Value different from Trend Zone
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fusion",
"trendValueFont": "Arial",
"trendValueFontSize": "12",
"trendValueFontBold": "1",
"trendValueFontItalic": "1",
"trendValueAlpha": "80"
},
"data": [{
"label": "Q1",
"value": "195000"
}, {
"label": "Q2",
"value": "155000"
}, {
"label": "Q3",
"value": "178000"
}, {
"label": "Q4",
"value": "192000"
}],
"trendlines": [{
"line": [{
"isTrendZone": "1",
"startvalue": "92000",
"endvalue": "10800",
"color": "C2C2C2",
"valueOnRight": "1",
"displayvalue": "Target Range"
}]
}]
}
})
.render();
});
Used CSS -
.raphael-group-81-dataset-axis-trend-label {
text-shadow: 0 0 red;
}
Here is a Demo fiddle - https://jsfiddle.net/3tmao0u7/1/
Hope it would help.