fusioncharts

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


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

Solution

  • 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.