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>
Related
I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},
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
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.
I'm trying find how to position the labels inside the bars in this case.
<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; margin: 0 auto">
</div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
subtitle: { text: 'Some syubtext' },
xAxis: [{ categories: ['2009','2010','2011','2012','2013'] }],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: { stacking: 'percent',
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'John',
data: [28, 23.6, 19.4, 17.5, 22]
}, {
name: 'Jane',
data: [56.7, 60.4, 64, 64.8, 60]
}, {
name: 'Joe',
data: [15.3, 15.9, 16.6, 17.7, 18]
}]
});
});
js fiddle
This works on Chrome, but FF and IE displaces the data labels.
Please advice.
adding verticalAlign: 'top' fixes the issue
dataLabels: {
enabled: true,
color: 'white',
verticalAlign: 'top'
}
fiddle amended http://jsfiddle.net/cbf74c1d/2/
I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.