CODEWITHSUNDEEP
javascripthighcharts
SLM
SLM

Reputation: 13

How to change highcharts graph axis colors on export?

I render a highcharts graph against a black background on the web, but want to provide an export of the graph with a white background that doesn't look terrible. The following config option does change the title of the graph but fails to change the axes. What am I missing?

    exporting: {
      chartOptions: {
        title: {
          text: sidebar.title + ' | ' + sidebar.name + ' (' + sidebar.type + ')'
        },
        xAxis: {
          lineColor: '#000',
          labels: {
            style: {
              color: '#000'
            }
          },
          title: {
            style: {
              color: '#000'
            }
          }
        },
        yAxis: {
          gridLineColor: '#000',
          lineColor: '#000',
          labels: {
            style: {
              color: '#000'
            }
          },
          title: {
            style: {
              color: '#000'
            }
          },
        },
      },
    }

Upvotes: 1

Views: 337

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

That problem is a Highcharts bug related with merging object and array and it is already reported here: https://github.com/highcharts/highcharts/issues/2022

As a workaround you can define the axes as arrays:

exporting: {
    chartOptions: {
        title: {
            text: 'new Text'
        },
        xAxis: [{
            lineColor: '#000',
            labels: {
                style: {
                    color: '#000'
                }
            },
            title: {
                style: {
                    color: '#000'
                }
            }
        }],
        yAxis: [{
            gridLineColor: '#000',
            lineColor: '#000',
            labels: {
                style: {
                    color: '#000'
                }
            },
            title: {
                style: {
                    color: '#000'
                }
            }
        }]
    }
}

Live demo: http://jsfiddle.net/BlackLabel/dqyr0fcu/

Upvotes: 1

Related Questions