CODEWITHSUNDEEP
javascriptamcharts
Tamil Selvan C
Tamil Selvan C

Reputation: 33

AmCharts - How do I ensure that all of my graph values are visible in my filled line chart?

How do I ensure that all of my graph values are visible in my filled line chart? I want to set this up so that the smaller values are in front and the larger values are behind it. Currently the green bar charts are hidden due to the larger values overlapping over it.

ScreenShot

My code is below

'graphs': [{
    'balloonText': '[[categoryField]]<strong>[[title]]</strong>: [[forecastedUsageValue]] [[forecastedUsageUnits]]',
    'id': 'forecastedUsage',
    'lineThickness': 2,
    'lineAlpha': 0.98,
    'fillAlphas': 0.4,
    'title': 'Forecasted Usage',
    'valueField': 'forecastedUsageValue',
    'fillColors': '#68AE44',
    'lineColor': '#68AE44'
  }, {
    'balloonText': '[[categoryField]]<strong>[[title]]</strong>: [[onPeakHedgeValue]] [[onPeakHedgeUnits]]',
    'id': 'on-peak-hedged',
    'lineAlpha': 0.98,
    'fillAlphas': 0.98,
    'title': 'On Peak Hedged',
    'lineThickness': 2,
    'valueField': 'onPeakHedgeValue'
  }, {
    'balloonText': '[[categoryField]]<strong>[[title]]</strong>: [[offPeakHedgeValue]] [[offPeakHedgeUnits]]',
    'id': 'off-peak-hedged',
    'lineAlpha': 0.98,
    'fillAlphas': 0.98,
    'title': 'Off Peak Hedged',
    'lineThickness': 2,
    'valueField': 'offPeakHedgeValue',
    'lineColor': '#D55479'
  }],

Upvotes: 0

Views: 155

Answers (1)

xorspark
xorspark

Reputation: 16012

You can't control which value is in the front of the other in a filled line graph. The easy fix is to adjust your fillAlphas to a smaller value so that they're more transparent, allowing you to see the values where the filled segments overlap. You might also want to consider enabling bullets as well, as well as a chartCursor so that it's easier for the user to trigger balloons for those overlapping sections.

Upvotes: 0

Related Questions