Anychart react set a theme

Question

I´m currently using the anycharts react plugin in order to create a demo, but I can't figure it out how to change the default theme. Does any body has an idea.

I tried:

import React from 'react'
import AnyChart from 'anychart-react'
import './anychart-ui.scss'

const data = [
  ['p1', 5, 4],
  ['p2', 6, 2],
  ['p3', 3, 7],
  ['p4', 1, 5]
]

const complexSettings = {
  width: 800,
  height: 600,
  type: 'column',
  data: 'P1,5\nP2,3\nP3,6\nP4,4',
  title: 'Column chart',
  yAxis: [1, {
    orientation: 'right',
    enabled: true,
    labels: {
      textFormatter: '{%Value}{decimalPoint:\\,}',
      fontColor: 'red'
    }
  }],
  legend: {
    background: 'lightgreen 0.4',
    padding: 0
  },
  lineMarker: {
    value: 4.5
  }
}

const customTheme = {
  // define settings for bar charts
  'bar': {
    // set chart title
    'title': {
      'text': 'Bar Chart',
      'enabled': true
    },
    // settings for default x axis
    'defaultXAxisSettings': {
      // set x axis title
      'title': {
        'text': 'Retail Channel',
        'enabled': true
      }
    },
    // settings for default y axis
    'defaultYAxisSettings': {
      // set axis name
      'title': {
        'text': 'Sales',
        'enabled': true
      }
    }
  }
}

export const AnychartsDemo = (props) => (
  <div style={{ margin: '0 auto' }} >
    <AnyChart
      width={800}
      height={600}º
      type='pie'
      data={[1, 2, 3, 4]}
      title='Simple pie chart'
      theme='Light Blue'
    />
    <hr />
    <AnyChart
      type='column'
      title='Multicolumn chart'
      width={800}
      height={600}
      data={data}
      legend
      theme={customTheme} />
    <AnyChart
      {...complexSettings}
    />
  </div>
)

export default AnychartsDemo

But nothing works.

@Ved nothing, I just update my question to let you check the component code. — Jean, Apr 19 '17 at 09:25
@AnthonyKong is the css to show the context menu, the menu with the save chart as, save data as... — Jean, Apr 19 '17 at 09:40

score 3 · Accepted Answer · answered Apr 20 '17 at 17:54

Jean,

to solve this issue, you have to call anychart.theme('lightBlue') before the first usage of <AnyChart /> (important: please use the camelCase). Also, you need to include the appropriate theme:

app.html

<head>

    <script src="http://cdn.anychart.com/themes/latest/light_blue.js"></script>
</head>

Or you can download the theme from cdn: http://cdn.anychart.com/#themes

app.js

import React from 'react'
import AnyChart from 'anychart-react'
anychart.theme('lightBlue')

Anychart react set a theme

1 Answers1

Linked