Demo - Series Styles

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    Series Styles
  </h1>

  <p>
    The FlexChart automatically picks colors for each series based
    on a default palette, which you can override by setting the 
    <b>palette</b> property.</p>
  <p>
    You can also override the default style settings for each series
    by setting the <b>style</b> and <b>symbolStyle</b> properties of
    any series to an object that specifies SVG styling attributes, 
    including fill, stroke, strokeThickness, and so on.</p>
  <p>
    The Series.style property is an exception to the general rule 
    that all styling in Wijmo is done through CSS. This is because
    many charts have dynamic series, which would be impossible to 
    style in advance.</p>
  <p>
    This example uses the <b>style</b> and <b>symbolStyle</b>
    properties to select style attributes for each series:</p>  

  <div id="theChart"></div>

</div>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    series: [
    	{
      	binding: 'sales',
        name: 'Sales',
        style: {
      		fill:'green', 
        	stroke:'darkgreen',
        	strokeWidth: 1
      	}
			},
      { 
      	binding: 'expenses', 
        name: 'Expenses',
        style: {
					fill: 'red', 
          stroke:'darkred',
          strokeWidth: 1        
        }
			},
      {
      	binding: 'downloads', 
        name: 'Downloads',
				chartType: 'LineSymbols',
        style: {
					stroke: 'orange',
          strokeWidth: 5        
        },
        symbolStyle: {
					fill: 'gold',
          stroke:'gold'        
        }
			}
    ]
  });
  
	// create some random data
  function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
	    data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i],
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000,
	      downloads: Math.round(Math.random() * 20000),
	    });
	  }
  	return data;
  }

}