ローソクの色を反転 - 相場史データベース〜歴史は繰り返さないが韻を踏む〜

ローソクの色反転は思ったより厄介でした

最初、candlestick シリーズタイプの fallingColor と risingColor オプションを設定することで変更しようとしたのですが、うまくいきませんでした
chatGPTによると

すみません、反転がうまく機能しないようです。Google ChartsのCandlestickChartでは、Candlestickの塗りつぶしと白抜きの色を直接反転させることが難しい場合があります。

代替案として、データを事前に反転させてからグラフに渡す方法が考えられます。具体的には、データを読み込んだ後、各キャンドルのデータのオープンとクローズを交換することで、表示を反転させることができます。

そこで以下のようにコードを書き直して反転に成功しました

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="chartRangeFilter_dashboard_div">
        <div id="chartRangeFilter_chart_div" style="width: 100%; height: 500px;"></div>
        <div id="chartRangeFilter_control_div" style="width: 100%; height: 100px;"></div>
    </div>

    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart', 'table', 'gauge', 'controls'] });
        google.charts.setOnLoadCallback(drawChartRangeFilter);

        function drawChartRangeFilter() {
            var dashboard = new google.visualization.Dashboard(
                document.getElementById('chartRangeFilter_dashboard_div'));

            var control = new google.visualization.ControlWrapper({
                'controlType': 'ChartRangeFilter',
                'containerId': 'chartRangeFilter_control_div',
                'options': {
                    'filterColumnIndex': 0,
                    'ui': {
                        'chartType': 'LineChart',
                        'chartOptions': {
                            'hAxis': { 'baselineColor': 'none' }
                        },
                        'chartView': {
                            'columns': [0, 4]
                        },
                        'minRangeSize': 17280000
                    }
                },
                'state': { 'range': { 'start': new Date(2020, 2, 1), 'end': new Date(2020, 3, 31) } }
            });

            var chart = new google.visualization.ChartWrapper({
                'chartType': 'CandlestickChart',
                'containerId': 'chartRangeFilter_chart_div',
                'options': {
                    'legend': { 'position': 'none' },
                    'series': {
                        0: { 'color': 'blue', 'fallingColor': { strokeWidth: 0, fill: '#FF0000' }, 'risingColor': { strokeWidth: 0, fill: '#00FF00' } }
                    }
                },
                'view': {
                    'columns': [
                        {
                            'calc': function (dataTable, rowIndex) {
                                return dataTable.getFormattedValue(rowIndex, 0);
                            },
                            'type': 'string'
                        },
                        3, 1, 4, 2
                    ]
                }
            });

            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1L9bG7e-9NSIZnKYcsfE2fB440JOVghWL9XuXJj6fCXc/gviz/tq?range=A8993:E');
            
            query.send(function (response) {
                if (response.isError()) {
                    console.log('Error in query: ' + response.getMessage());
                    return;
                }
                
                var data = response.getDataTable();

    // オープンとクローズを交換する
    for (var row = 0; row < data.getNumberOfRows(); row++) {
        var open = data.getValue(row, 1);
        var close = data.getValue(row, 4);
        data.setValue(row, 1, close);
        data.setValue(row, 4, open);
    }

                dashboard.bind(control, chart);
                dashboard.draw(data);
            });
        }
    </script>
</body>
</html>

Tooltipもカスタマイズしたかったのですが、chatGPTによると