Search code examples
chartsgoogle-visualization

How to change color of vertical line with google chart candle stick?

I want to change the candlestick chart's color. When fallingColor.fill and risingColor.fill are set, the vertical line color remains blue like the image.

enter image description here

This is the code I wrote.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none',
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
      },
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    </script>
  </head>

https://jsfiddle.net/fe26/t6b57vnL/7/

How can I change the color of the line?

Solution

  • you can use the colors option, an array of color strings.
    each color in the array, is applied to each series in the data table.
    in the example posted, there is only one series, so only one color is needed / allowed.

    the colors option will change the color of all the chart elements.
    however, the fallingColor & risingColor options will override the colors option.
    leaving only the vertical lines the same color as the colors option.

    see following working snippet...

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ], true);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

    you can also you the style column role.

    the style role is added as an additional column to the data table.
    set the value of the column to the color / style you want to display for each row.

    if the style value is null, it will default back to the above scenario.
    however, if it is not null, it will override both options in the above scenario.

    note: you will need to provide column headings to use the style role.

    var data = google.visualization.arrayToDataTable([
  ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
  ['Mon', 20, 28, 38, 45, 'lime'],
  ['Tue', 31, 38, 55, 66, 'purple'],
  ['Wed', 50, 55, 77, 80, null],
  ['Thu', 77, 77, 66, 50, null],
  ['Fri', 68, 66, 22, 15, 'orange']
]);

    see following working snippet...

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

    another option would be to use css, and override the svg elements for the vertical lines,
    which are drawn using <rect> elements, with --> width="2"
    but I would use this as a last resort.

    #chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
}

    see following working snippet...

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
    #chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

    you could also listen for the chart's 'ready' event,
    and manually change the chart's svg elements using your own script.
    but this is not recommended...