CODEWITHSUNDEEP
javascriptamcharts
Okyam
Okyam

Reputation: 730

Set the color of the line graph when past a guide line on amcharts

I want to change the color of the line graph like they do with nagative values-> https://www.amcharts.com/demos/date-based-line-chart/.

The difference is that i need to change the color when its past an specific guide line, in my case i have four guide line and in the example i just can set one nagativebase and negativeLineColor.

Thanks!!

Upvotes: 1

Views: 1177

Answers (1)

xorspark
xorspark

Reputation: 16012

The link you posted talks about negativeBase, which allows you to set a different baseline value in order to change the line color. You can set that equal to your guide value to achieve the effect you're looking for.

var chart = AmCharts.makeChart( "chartdiv", {
  // ...
  "valueAxes": [ {
    // ...
     "guides": [{
       "value": 20,
       // ...
     }],
    // ...
  } ],
  "graphs": [ {
    // ...
    "negativeLineColor": "#67b7dc",
    "negativeBase": 20,
    // ...
  } ],
  // ...
});

Demo

Edit

Multiple negative bases aren't supported out of the box, however you can overlay multiple graphs on top of each other with different negative base values while disabling their balloons and setting their base lineColor to transparent:

  "graphs": [{
    "balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "negativeLineColor": "#ff0000",
    "negativeBase": 20,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineColor": "transparent",
    "negativeLineColor": "#00ff00",
    "negativeBase": 10,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "lineColor": "transparent",
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "negativeLineColor": "#0000ff",
    "negativeBase": -10,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineColor": "transparent",
    "negativeLineColor": "#00ffff",
    "negativeBase": -20,
    "valueField": "visits"
  }],

Demo

Upvotes: 1

Related Questions