Creating a 1D chart using Highcharts - javascript

How do you create a one dimensional scatter plot like the one used at HBR site:
When I tried to replicate the same after going through the JS files of HBR, I'm getting the following :
I need to eliminate the second grid line on the y axis.
Below is the JS code I'm using :
$(function () {
$('#highchart').highcharts({
credits: {
enabled: !1
},
chart: {
type: "scatter",
height: 140,
width: 580,
renderTo: "chart"
},
title: {
style: {
color: "#000",
fontFamily: "Helvetica, Arial, sans-serif",
fontSize: "12px",
fontWeight: "bold",
textTransform: "uppercase",
whiteSpace: "normal"
},
text: "Test"
},
legend: {
text: null,
useHTML: !0,
x: 20,
align: "center",
itemStyle: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "8px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
},
borderWidth: 1,
enabled: !0,
itemMarginTop: 0,
itemMarginBottom: 0,
layout: "horizontal",
verticalAlign: "bottom"
},
xAxis: {
title: {
text: null,
},
min: 0,
max: 5,
labels: {
enabled: !1
},
tickLength: 0,
lineWidth: 0
},
yAxis: [{
max: 0,
min : 0,
minRange :0.1,
maxPadding: .01,
lineWidth: 0,
tickWidth: 2,
tickLength: 6,
labels: {
y: 3
},
title: {
text: "Opportunity for<br/>development",
rotation: 0,
align: "middle",
offset: 50,
style: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "10px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
}
},
labels: {
enabled: !1
},
tickWidth: 0,
tickLength: 0,
maxPadding: 0,
padding: 30,
gridLineWidth: 2
}, {
title: {
text: "Strength",
rotation: 0,
align: "middle",
offset: 50
},
opposite: !0
}],
plotOptions: {
scatter: {
events: {
legendItemClick: function () {
return !1
}
},
marker: {
radius: 8,
states: {
hover: {
enabled: !0
}
},
symbol: "circle"
},
tooltip: {
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
headerFormat: "<b>{series.name}</b><br>",
pointFormat: "{point.x} out of 25"
}
}
},
series: [{
name: "How you scored",
color: "#4cb6e8",
data: [[3, 0]],
}, {
name: "Average",
color: "#b20303",
data: [[4, 0]],
zIndex: 8,
marker: {
symbol: "diamond"
}
}],
});
});

Use tickInterval option for yAxis object with a bigger value than (max-min) value
yAxis: [{
max: 0,
min: 0,
//...
tickInterval: 1, // put any number bigger than (max-min) value
JSFiddle demo

Related

How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?

I have made the following gantt chart using Highcharts Gantt chart. However, i want a part of the line to be dashed instead of solid. Something like this -
However i'm unable to make it dashed. It always appears to be solid. How do i make it dashed and that too, only a certain part of it ?
The following is my current chart option. 'this.series' is the data i'm providing to the chart.
{
chart: {
type: 'gantt',
title: {
text: 'Gantt Chart with Progress Indicators'
},
xAxis: [{
min: Date.UTC(2016, 1, 1),
max: Date.UTC(2016, 1, 1) + this.day * 365 * 6,
// max: Date.UTC(2039, 12, 31),
tickInterval: this.day * 365, // 1 year
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -12,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
showFull: false
},
gridLineWidth: 1,
labels: {
align: 'center',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
minWidth: '160px',
fontWeight: 'bold'
// textOverflow: 'ellipsis'
}
},
}],
yAxis: {
type: 'category',
grid: {
cellHeight: 44,
columns: [{
title: {
text: 'Study ID',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
width: '160px',
fontWeight: 'bold'
}
},
labels: {
format: '{point.nct_id}',
}
// categories: this.map(this.series, function (s) {
// return s.name;
// })
}],
},
min: 0,
max: 10,
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -10,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
},
labels: {
style: {
fontFamily: 'Helvetica',
fontSize: 14,
color: '#007BFF',
minWidth: '160px',
textOverflow: 'ellipsis'
}
},
},
plotOptions: {
gantt: {
},
},
series: [{
name: 'Project 1',
type: 'gantt',
data: this.series,
dataLabels: [{
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-left: -12px; background: #0E4A91;"></div>',
useHTML: true,
align: 'left'
}, {
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-right: -12px; background: #0E4A91"></div>',
useHTML: true,
align: 'right',
style: {
overflow: 'hidden'
}
}],
}],
credits: {
enabled: false
}
}
It would be a great help if someone could help me out with this. Thanks!
You can use line series with zones:
series: [{
name: 'Project 1',
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 28)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 29)
}],
data: [{
x: Date.UTC(2014, 10, 27),
y: 0
}, {
x: Date.UTC(2014, 10, 29),
y: 0
}]
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/b7xdcjpt/
API Reference: https://api.highcharts.com/highcharts/series.line.zones

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}
You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts : Put data labels legend inside columns

I would like to move the datalabels inside the columns.
In the example below, I would like to have October just below the "20" text in column.
How can I do that ?
Here is a working fsfiddle : http://jsfiddle.net/cfu6fe5e/
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
plotOptions: {
series: {
pointPadding: 0.01,
groupPadding: 0,
}
},
title: {
text: ''
},
colors: [
'#ffffff'
],
credits: {
enabled: false
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
min: 0,
labels: {
enabled: false
},
title: {
text: ''
}
},
series: [{
showInLegend: false,
name: 'Ordered subscriptions',
data: [
['October', 20],
['November', 19],
['December', 10]
],
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
align: 'center',
verticalAlign:'bottom',
y: 20,
style: {
width:100,
fontSize: '12px',
fontFamily: 'Avenir'
}
}
}]
});
});
Try Formatter and useHTML
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
verticalAlign:'bottom',
formatter: function() {
return '<span style="width:20px;padding-left:15px">' + this.y + '</span><br/> <span style="width:20px;">' +this.point.name + '</span>';
},
y: 10,
useHTML:true,
align: 'center',
style: {
fontSize: '15px',
fontFamily: 'Avenir'
}
}
Fiddle : http://jsfiddle.net/4jfbLouq/
Try something like this
xAxis: {
type: 'category',
labels: {
align: 'left',
x: 0,
y: -2
,
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},

Highcharts Uncaught TypeError: Cannot read property 'chart' of undefined

I am upgrading from Highcharts 3.0.7 to 4.2.5. Several charts that worked fine in 3.0.7 and throwing this error on reflow. Seems the reflow event is providing the wrong context. The context of the window, so the chart is undefined. Is there a way to fix this context?
Here is the chart code from my environment:
var ChartSize = {
SMALL: {
marginTop: 44,
marginLeft: 26,
marginRight: 26,
height: 226,
width: 290,
yAxis: {
height: 116
},
xAxis: {
plotLines: {
x: -30,
y: -26
},
offset: 32,
labels: {
y: 20,
fontSize: '11px'
},
y: 15
}
},
LARGE: {
marginTop: 75,
marginLeft: 28,
marginRight: 28,
height: 375,
yAxis: {
height: 216
},
xAxis: {
plotLines: {
x: -83,
y: -60
},
offset: 40,
labels: {
y: 25,
fontSize: '12px'
},
y: 20
}
}
}
...
{
chart: {
backgroundColor: 'transparent',
type: 'area',
marginTop: ChartSize[args.size].marginTop,
marginLeft: ChartSize[args.size].marginLeft,
marginRight: ChartSize[args.size].marginRight,
height: ChartSize[args.size].height,
width: ChartSize[args.size].width,
reflow: true,
events: {
load: function() {
that.onChartLoaded(this);
},
redraw: function() {
that.onChartLoaded(this);
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
},
symbol: 'circle'
},
lineWidth: 0
},
series: {
fillOpacity: 1
}
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return that.getTitle(this.y) + "<br/>" + TimeUtil.formatTime(that.getSecondsOffset(this.x), that.timeFormat24Hour);
},
shared: true,
useHTML: true
},
xAxis: [{
type: 'datetime',
tickInterval: 3600 * 1000,
title: {
text: null
},
startOnTick: false,
maxPadding: 0,
min: min,
max: max,
labels: {
y: ChartSize[args.size].xAxis.labels.y,
autoRotation: false,
staggerLines: 1,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if (this.isFirst) {
return '<span class="first-time-label" ' + that.firstLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(min), that.timeFormat24Hour) + '</span>';
} else if (this.isLast) {
var style = that.timeFormat24Hour ? 'style="margin-left: 6px"' : '';
return '<span class="last-time-label" style="margin-left: -5px" ' + that.lastLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(max), that.timeFormat24Hour) + '</span>';
}
return '<a href="javascript:void(0)" style="color:#898989; font-size: 12px" title="'
+ TimeUtil.formatTime(that.getSecondsOffset(this.value), that.timeFormat24Hour) + '">●</a>';
},
useHTML: true
},
tickWidth: 0,
plotLines: [{
color: '#282828',
dashStyle: 'ShortDash',
value: sleepTime.getTime(),
width: 2,
label: {
text: '<div class="sleep-time-placeholder bed-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5,
padding: 0.5
},
{
color: '#282828',
dashStyle: 'ShortDash',
value: wakeTime.getTime(),
width: 2,
label: {
text: '<div class="awake-time-placeholder wake-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5
}]
},
{
type: 'datetime',
title: {
text: null
},
lineColor: '#C5C5C5',
linkedTo: 0,
offset: ChartSize[args.size].xAxis.offset,
startOnTick: true,
min: min,
labels: {
autoRotation: false,
align: 'left',
staggerLines: 1,
useHTML: true,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if(this.isLast) {
return '';
}
var date = DateParser.parseEpoch(this.value);
var dateStr = DateFormatter.formatMonthDay(date);
return '<span class="timeline_label">' + dateStr.toUpperCase() + '</span>';
},
y: ChartSize[args.size].xAxis.y
},
tickWidth: 1,
tickPosition: 'inside',
tickPositions: [ min, midnightTime.getTime(), max ]
}],
yAxis: [ {
gridLineColor: '#E6E6E6',
labels: {
enabled: false
},
title: {
text: ''
},
lineWidth: 0,
max: 3,
tickInterval: 1
} ],
legend: {
enabled: false
}
}
}

Highcharts: X-axis labels inside columns

I would like to place my X-axis labels inside my columns and rotated to a vertical position. I've searched the web endlessly, but as of now, nothing seems to work, so I'll try and post my specific problem.
Here's the fiddle:
http://jsfiddle.net/D43q9/1/
$(document).ready(function() {
function chart() {
var change = {
0: '',
25: '',
50: '',
75: '',
100: ''
};
$('#chart').highcharts({
legend: {
enabled: false
},
tooltip: {
enabled: false
},
chart: {
type: 'column',
marginTop: 0,
backgroundColor: 'transparent',
spacingTop: 0,
spacingRight: 20,
spacingBottom: 20,
spacingLeft: 20
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.025
}
},
title: {
text: ''
},
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
yAxis: {
max: 101,
labels: {
formatter: function() {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
},
style: {
color: '#fff',
font: '12px Nunito'
}
},
title: {
text: null
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#444',
gridLineColor: '#444'
},
credits: {
enabled: false
},
series: [{
name: '',
data: [95,70,80,60,100,75],
color: '#ffd800',
borderColor: 'transparent'
}]
});
};
chart();
});
Set rotation and y value for labels: http://jsfiddle.net/D43q9/2/
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
rotation: -90,
y: -20,
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}

Categories