How to make color of Trend Value different from Trend Zone?

Question

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

Answer 1

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/

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/trend-lines-and-zones#customize-the-trend-line-display-value-text

Hope it would help.