Setting horizontal lines on a chart

[Ingo]

Hello,

I'm using FusionCharts to display candlestick charts like so:

I would like to draw to horizontal lines into the chart (one representing a stop-loss level, and the other one a target level).

I read about this here: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/div-lines-and-grids and assume that this might point me in the right direction.

However, when I implement that into my JS code, the chart does not display any changes to the grid and does not show those minimum and maximum lines. What am I doing wrong?

Here is the code:

var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema);

    chart = new FusionCharts({
      type: 'timeseries',
      renderAt: 'chart-container',
      width: "100%",
      height: 600,
      dataSource: {
        data: fusionTable,
        chart: {
          "theme": "fusion",
          "adjustDiv": "0",
          "yAxisMaxvalue": "0.7",
          "yAxisMinValue": "0.3",
          "numDivLines": "10",
          "divLineColor": "#6699cc",
          "divLineAlpha": "60",
          "divLineDashed": "0"
        },
        caption: {
          "text": "RatioChart"
        },
        yAxis: [{
          "plot": {
            "value": {
              "open": "Open",
              "high": "High",
              "low": "Low",
              "close": "Close"
            },
            "type": "candlestick"
          },
          "format": {
            "prefix": ""
          },
          "title": "Ratio long/short",
          "orientation": "right"
        }],
      }
    }).render();
 

Many thanks,

Ingo

[Srishti Jaiswal]

Hi Ingo,

In FusionCharts you can use the "Reference Line" feature to draw an arbitrary fixed line which can help you quickly compare any data point against the fixed value line. Hence, we suggest you to use reference lines to represent the Stop-Loss Level, and the Target Level as per your requirement.

Also, you can set the maximum and minimum limits of the Y-axis by using the "min" and "max" attributes under the "yAxis" object.

Please refer to this fiddle for the implementation: http://jsfiddle.net/7ozmhp0t/

In the above sample, the "referenceLine" objects array is defined under "yAxis" to configure the two target levels.

Documentation links:-
Reference Line: https://www.fusioncharts.com/dev/fusiontime/fusiontime-component/reference-line-in-fusiontime
Set Y-axis limits: https://www.fusioncharts.com/dev/fusiontime/fusiontime-component/y-axis-in-fusiontime#set-y-axis-limits

Hope this will help.

Thanks,

Srishti Jaiswal

[Ingo]

Hi Srishti,

that works perfectly, thank you!

Cheers

Ingo

[Srishti Jaiswal]

Hi Ingo,

Glad to know that the provided solution worked for you as per your requirement.

Thanks,

Srishti Jaiswal