Invient Charts Theming

Flow
1

Hi everyone,

am using the great Invient Charts Add-On and have a question regarding theming.

On the Highcharts homepage, you can view the demos in different themes. There is a button “View visual theme” that shows the js that needs to be applied.

e.g.


/**
 * Grid theme for Highcharts JS
 * @author Torstein Hønsi
 */

Highcharts.theme = {
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
,
   chart: {
      backgroundColor: {
         linearGradient: [0, 0, 500, 500]
,
         stops: [
            [0, 'rgb(255, 255, 255)']
,
            [1, 'rgb(240, 240, 255)']

         ]
      }
,
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      plotBorderWidth: 1
   },
   title: {
      style: { 
         color: '#000',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   subtitle: {
      style: { 
         color: '#666666',
         font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   xAxis: {
      gridLineWidth: 1,
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'

         }            
      }
   },
   yAxis: {
      minorTickInterval: 'auto',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }            
      }
   },
   legend: {
      itemStyle: {         
         font: '9pt Trebuchet MS, Verdana, sans-serif',
         color: 'black'

      },
      itemHoverStyle: {
         color: '#039'
      },
      itemHiddenStyle: {
         color: 'gray'
      }
   },
   labels: {
      style: {
         color: '#99b'
      }
   }
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

Can please someone give me a hint on how to use such themes with highcharts? Wheres the place to get in? Is it possible to write a method that accepts some JSON Input and applies this as a theme?

Thank you very much, it would really help me if someone can bring me on track.

Regards
TJ

2

We decided that for our use, the ability to dynamically change themes wasn’t worth the effort of coding a Vaadin interface for it. So we didn’t do it. Switching themes dynamically makes a nice demo, but in a real business application (or at least the ones we build) we haven’t seen a need to dynamically change themes.

If you want your own theme and can live with not being able to set it dynamically at run-time, then you can do that using the highcharts theme file mechanism. Check their documentation on how to do it. It is pretty straightforward.

Overall, we have a bit of a philosophical issue with each add-on component doing its own theming mechanism. Ideally, we would like to see all Vaadin add-on components’ themes set as part of the regular Vaadin theme using setTheme() method. However, setTheme() refreshes the entire browser window to load different css files, which is a bit too visually jarring if you are trying to do a gentle switch to another theme (as is done in the highcharts demo you are referring to).

3

Thank you very much for your hint, indeed pretty easy :slight_smile: I think you are right, this should be sufficient, as all charts should have the same styling for consistency reasons.

Regards
TJ

4

Hi!
I’m trying to (unsuccesfully) theming invientcharts/highcharts in the same way as you did, using a js file containing a theme.

I added the theme file inclusion just after the highchart.js inclusion.
Theme js file is loading and executing. I can see it in firebug.
But then nothing happens on the chart.

Could you give me a hint?

Thanks in advance,
Igor