jQuery UI Widgets › Forums › Chart › Pie chart custom colors
Tagged: chart, javascript chart, jquery chart, jqwidgets chart, pie series
This topic contains 2 replies, has 3 voices, and was last updated by ryan paul 11 years, 5 months ago.
-
AuthorPie chart custom colors Posts
-
Hi guys!
I was wondering if there was a way to color specific items in a pie chart with specific colors. I have a map with colored icons that I would like to correlate to the pie chart categories.
Thanks!
Hi robrichard,
It is possible to create a custom color scheme and apply it to the Chart.
For example;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Pie Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var source = { datatype: "csv", datafields: [ { name: 'Browser' }, { name: 'Share' } ], url: '../sampledata/desktop_browsers_share_dec2011.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#ffff00', '#ff0000', '#ccff00', '#00ffff', '#aaaaaa'] }); // prepare jqxChart settings var settings = { title: "Desktop browsers share in Dec 2011", description: "(source: wikipedia.org)", enableAnimations: true, showLegend: false, legendPosition: { left: 520, top: 140, width: 100, height: 100 }, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, colorScheme: 'myScheme', seriesGroups: [ { type: 'pie', showLabels: true, series: [ { dataField: 'Share', displayText: 'Browser', labelRadius: 100, initialAngle: 15, radius: 130, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='host' style="margin: 0 auto; width: 699px; height: 400px;"> <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;"> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhi everyone,
i have a problem in changing the color of the pie chart,
i have a data, like field1, field2, field3when i set the color of the field using the above method, when
field 1 color would be yellow,
field 2 color would be red,
field 3 color would be blue,the problem when i do not have a data for field1, the color of the chart will change to
field2 will be red, and field3 will become blue.is there a way to fix the color that even when the value of the first columns it will not change the color of the succeeding fields?
thanks,
Ryan -
AuthorPosts
You must be logged in to reply to this topic.