Is there a way I can change the colors in this pie chart code? If not, is there some code I can add that would allow me to choose specific colors (preferably RGB or hex) for each slice of the pie?
JSFiddle: http://jsfiddle.net/hdbmuwa2/
Thanks!
Java:
$(function () {
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Green Up Amount Recycled'
},
subtitle: {
text: 'Click the Recycled Materials slice for more information.'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Materials",
colorByPoint: true,
data: [{
name: "Landfill - 45,821 lbs",
y: 23.73,
}, {
name: "Recycled Materials - 147,276 lbs",
y: 76.27,
drilldown: "Recycled Materials"
}]
}],
drilldown: {
series: [{
name: "Recycled Materials",
id: "Recycled Materials",
data: [
["Tent Frames and Chairs - 6,400 lbs", 4.35],
["Aluminum Cans - 28,950 lbs", 19.66],
["Plastic PET Bottles - 36,420 lbs", 24.73],
["Glass - 40,950 lbs", 27.8],
["Cardboard - 30,000 lbs", 20.37],
["Solo Cups - 4,556 lbs", 3.09],
]
}]
}
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 500px; max-width: 500px; height: 500px; margin: 0 auto"></div>
Yes you can!
Add a attribute array of the colors you want to displayed in the plotOptions:pie object.
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
colors: ['#00e500', '#004400']
},
},
You can see an example of it working here:
http://jsfiddle.net/jbs01j7k/
You can see more of the styling and other options here:
http://api.highcharts.com/highcharts#plotOptions.pie.colors
Related
I am using High Chart Js library for my project. I created Pie chart. its working well. how i need to change pie chart colors. how i do it? Please check my javascript code
Highcharts.chart('false-positive-graph', {
chart: {
type: 'pie'
},
title: {
text: 'False Positive % Suspicious incidents',
style: {fontSize: '12px',
fontFamily :"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontWeight: 'bold',
color: '#black',
position:'top'
}
},
credits: {enabled: false},
legend: {enabled: false},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b> of total<br/>'
},
series: [
{
name: "",
colorByPoint: true,
data: $scope.actionCount
}
],
drilldown: {
drillUpButton: {
position: {
relativeTo:"plotBox",
verticalAlign: 'right'
}
},
series: [
{
name: "REPORT",
id: "REPORT",
data: $scope.reportCount
},
{
name: "DISCOUNT",
id: "DISCOUNT",
data: $scope.discountCount
}
]
}
});
my chart view as below image.
you need to add colors attribute to chartoptions like below
Highcharts.setOptions({
colors: ['#50B432', '#ED561B']
});
Example demo
$(function () {
Highcharts.setOptions({
colors: ['#50B432', '#ED561B']
});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
series: [{
type: 'pie',
name: 'Example',
data: [
['One', 45.0],
['Two', 26.8],
]
}]
});
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
How do I Highlight a slice of pie chart in highcharts on click of a div? More like copying the highlighting functionality of legends but from a differrent div.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
For example in the highchart above I want a different div to do what legends do here. Here is the link to jsfiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-legend/
To do this make the chart a variable and interact with it like a typical javascript Object:
// Build the chart
$(function() {
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$('#button').click(function() {
var point = chart.series[0].data[3]; //Or any other point
point.select();
chart.tooltip.refresh(point);
});
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="button" style="background-color:grey; width:100px;color:white;">Select Safari</div>
edit: words
I have 2 div of same content, I want to display the same pie charts inside the 2 div, however just the first one is showing, I know the idea of duplicate the js code and make the id like #container1, #container2, but is there a way to avoid code duplication.
Thank you.
Here is the js:
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
});
And HTML :
<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>
You can define the Highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// And then for every container init Hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>
I have small width of div and In that I want to show pie chart, But some labels of chart are going out of parent.
Here is what I did.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 350px; margin: 0 auto;border:1px solid #F00;"></div>
#laxmikant-dange Do like this http://jsfiddle.net/Nishith/cnanbsm0/1/
Set desired width ,for your case I set datalabel's width 60 pixels.
dataLabels: {
style: {
width: '60px'//whatever width you want
},
I am facing a problem to show data from database to pie chart. Anyone who have idea about this problem then please help me. I am using laravel5 and js(http://www.highcharts.com/demo/pie-basic)
I have a table named products which contain different items that belongs to different category and they are in categories column. I want to show these category and number of product in pie chart ie product =electronic & number=3,product=clothes & number=2 and so on
My controller function
public function category()
{
$data=[];
// this query select products from "categories" column with count
$recordsByCategories=\DB::table('products')
->select('categories','category_id', \DB::raw('count(*) as totalProducts'))
->groupBy('categories')
->get();
//I have made array to show data in pie chart accoding to js documentation given in above link
$data = array_merge_recursive($data, [
['name' => "{{$recordsByCategories->categories}}",
'y' => $recordsByCategories[0]->totalProducts,
],
]);
return view('dashboard.show',compact('data'));
Actual js is like this
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
And my view is like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 80%;min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Cases',
data: {!!json_encode($data)!!}, //I made changes here
}]
});
});
</script>
{{$data[0]}}
try as shown above.