I am having a problem, with the categories of two box plots. From the following fiddle: http://jsfiddle.net/Taylby/wxpqsr9b/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Medication Prescription between start date and stop date'
},
legend: {
enabled: true
},
xAxis: {
categories: ["Males","Females"],
title: {
text: 'Cohort'
},
max:1
},
yAxis: {
title: {
text: 'Interval between events'
},
plotLines: [{
value: 2413.8,
color: 'gray',
width: 1,
height: 100,
label: {
text: "Males Average",
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 16149.474524390858,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'males +3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: -11321.87452439086,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'females -3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 1706.6,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'C2 +3SDs',
align: 'center',
style: {
color: 'gray'
}
}}
],
},
series: [{
name: "Males",
data: [
[0,21,69,413,11566]
]
}, {
name: "Females",
data:[
[5,22,70,581,7860]
]
}]
});
});
you can see that there are two groups, Males and Females - however the box plot doesn't line up with the label.
Much appreciated for any thoughts.
You should add x index (first param in your data point).
series: [{
name: "Males",
data: [
[0, 0, 21, 69, 413, 11566]
]
}, {
name: "Females",
data: [
[1, 5, 22, 70, 581, 7860]
]
}]
Example: http://jsfiddle.net/wxpqsr9b/5/
Related
I am using ECharts to create a Doughnut chart and I would like to display static text in the center of the chart. However, there is a space between the text and subtext that I am unable to reduce. Can somebody please assist me in resolving this issue? The code is provided below with screenshot.
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
option = {
title: {
text: `51`,
subtext: 'INSTANCES',
x: 'center',
y: 'center',
textStyle:{
color: '#111111',
fontFamily: 'Montserrat',
fontWeight: 'bolder',
fontSize: 70,
},
subtextStyle:{
fontSize: 16,
color: '#888888',
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 36, name: 'Standard' },
{ value: 12, name: 'High Memory' },
{ value: 3, name: 'High CPU' },
{ value: 3, name: 'Other' },
]
}
]
};
Please don't say question already asked. I searched alot but faild.
The charts displaying perfectly in chrome, Firefox, and edge but not displaying in IE 11 and less.
here is my code
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
colors: [graph_data.series_color_one,graph_data.series_color_two,graph_data.series_color_three],
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: graph_categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: ['1','2','3'],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}]
});
The problem was with the series you had given. I just changed your series as following.
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
You can see that, you were given the data as a string data: ['1','2','3']. You can see the updated jsFiddle here.
Note: If jsFiddle is not loading in your IE browser, please try using draft version of jsFiddle.
I would also recommend you to style your container div, in your case teledensity with some height.
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: ['2015','2016','2017'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
});
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<div id="teledensity"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
Solved...!
As I was creating graph dynamically and I used .map() which is ES6 not supported by IE11 so I modify code
From
graph_series_data_one = series_data_one ?>.reverse().map(x => parseFloat(x));
graph_series_data_two = series_data_two ?>.reverse().map(x => parseFloat(x));
To
graph_series_data_one = series_data_one ?>.reverse().map(function (x) { return parseFloat(x); });
graph_series_data_two = series_data_two ?>.reverse().map(function (x) { return parseFloat(x); });
and it worked.
Thanks.
Here's a column chart - https://jsfiddle.net/kx8qqh2e/
When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);
For the sake of clarity and posterity:
You can turn off the standard tooltip, and use the dataLabels to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/4/
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]
Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.
$(document).ready(function() {
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}]
}]
};
$('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>
I have a chart comparing boolean data for two people over a number of years.
The jsfiddle below represents what I need except that I need the labels on the bottom axis to be aligned with the centre of the red and green blocks and to not have the 5 appear on the rightmost tick.
http://jsfiddle.net/zzella/Xa46f/3/
Anybody have any ideas how to achieve this for the above chart, or perhaps a better way to structure the data so as to obtain the results I need?
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'bar'
},
title: {
text: 'Action completed for year (Yes/No)'
},
xAxis: {
categories: ['Person 1', 'Person 2'],
labels: {
align: 'left',
style: {
fontSize: '13px',
fontFamily: 'Arial'
},
y: -45,
x: 60
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
},
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
},
legend: false,
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
},
formatter: function () {
console.log(this);
return this.key
}
},
},
},
series: [{
name: '2014',
data: [{
name: "2014: no",
color: "#a50000",
y: 1
}, {
name: "2014: yes",
color: "#006500",
y: 1
}],
}, {
name: '2013',
data: [{
name: "2013: yes",
color: "#006500",
y: 1
}, {
name: "2013: yes",
color: "#006500",
y: 1
}]
}, {
name: '2012',
data: [{
name: "2012: yes",
color: "#006500",
y: 1
}, {
name: "2012: no",
color: "#a50000",
y: 1
}]
}, {
name: '2011',
data: [{
name: "2011: no",
color: "#a50000",
y: 1
}, {
name: "2011: yes",
color: "#006500",
y: 1
}]
}, {
name: '2010',
data: [{
name: "2010: no",
color: "#a50000",
y: 1
}, {
name: "2010: no",
color: "#a50000",
y: 1
}]
}]
});
});
One wait to attain this is by adding a label format to your yAxis, like you did to your xAxis. If you add labels: { x: 40 }, the labels will center along the boxes.
To get rid of the random 5, you can do showLastLabel: false.
Here is the final yAxis that does what you described:
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
labels: {
x: 40
},
showLastLabel: false
},
Link to the Fiddle.
I'm using Highcharts to create a bar chart. I need this bar chart to eventually look like the chart below, with the x-axis tickmarks spanning the entire width of the chart:
With my current code, the chart looks like this:
Any ideas on how to make this happen?
Here is a fiddle with my current code.
And the actual code:
HTML:
<div id="q2-bar" class="chart">
</div>
JS:
$('#q2-bar').highcharts({
chart: {
type: 'bar',
backgroundColor:'transparent'
},
title: {
text: ''
},
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
overflow: 'justify',
enabled: false
},
gridLineColor: 'transpartent',
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
format: '{y}%',
color: '#ffffff'
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Expenses Covered',
borderWidth: '0',
data: [{
y: 46,
color: '#d70081'
},{
y: 52,
color: '#0099cc'
},{
y: 73,
color: '#75ad01'
},{
y: 47,
color: '#ffcc00'
},{
y: 64,
color: '#ff6600'
},{
y: 60,
color: '#663399'
},{
y: 42,
color: '#00b99c'
},{
y: 51,
color: '#ff0033'
},{
y: 51,
color: '#0099cc'
},{
y: 60,
color: '#d70081'
},{
y: 81,
color: '#ffcc00'
}]
}]
});
Thanks!
Set a 'gridLineWidth' and 'gridLineColor' in the x-axis.
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
},
gridLineWidth:'1px',
gridLineColor:'#FFFFFF'
},