Highchart multi axes labels not showing - javascript

I have 3 x-axis but their labels are not visible.
The whole idea is to have the bars thiner, and enought room for the labels
http://jsfiddle.net/rnz9ybuq/1/
xAxis: [
{
categories: ['01/14', '02/14', '03/14'],
title: {
text: "left column"
}
},
{
categories: ['stuff 1', 'stuff 2', 'stuff 3'],
opposite: true,
title: {
text: "1st right column"
}
},
{
opposite: true,
title: {
text: "2nd right column"
},
categories: ['thing 1', 'thing 2', 'thing 3' ]
}
],
yAxis: {
opposite: true,
min: 0,
max: 100,
labels: {
enabled: false
},
title: {
text: "Data"
}
},
I guess I'm missing something simple

You need to have reference to the xAxis (xAxis:2) in the serie.
Example: http://jsfiddle.net/rnz9ybuq/2/

Related

Datalables alignment doesnt work in Highchart Timeline

I am trying to align the data to left and right in Highchart horizontal timeline using dataLabels: {align: 'right'} But that doesnt work.
Code:
Highcharts.chart('container', {
chart: {
type: 'timeline',
inverted: true
},
title: {
text: 'Timeline of Space Exploration'
},
subtitle: {
text: 'Info source: www.wikipedia.org'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
enabled: true
}
}
},
series: [{
data: [{
name: 'First dogs',
label: '1951: First dogs in space',
description: '22 July 1951 First dogs in space (Dezik and Tsygan) '
}, {
name: 'Sputnik 1',
label: '1957: First artificial satellite',
description: '4 October 1957 First artificial satellite. First signals from space.'
}, {
name: 'First human spaceflight',
label: '1961: First human spaceflight (Yuri Gagarin)',
description: 'First human spaceflight (Yuri Gagarin), and the first human-crewed orbital flight'
}, {
name: 'First human on the Moon',
label: '1969: First human on the Moon',
description: 'First human on the Moon, and first space launch from a celestial body other than the Earth. First sample return from the Moon'
}]
}]
});
Expected: To move the data left and right.
You need to use distance property:
series: {
dataLabels: {
alternate: false,
distance: -100,
enabled: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4942/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.distance

How to draw a chart like below using chart js

I want to draw a Graph looks like below. i already have chart js library in my project so i can able to draw this graph using chart js
Please advise me How to draw this graph. if not possible with chart js please suggest some other libraries
You can use Highcharts-ng with angular which has a gant chart feature
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'SOTMP Checklist Compliance History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
DEMO

Align xAxis across line/column charts

I cannot get my common datetime xAxis to visually line up across line and column charts. I want the crosshairs to move in lockstep.
Here are line and column charts with synchronized crosshairs to demonstrate:
https://jsfiddle.net/aadhoc331/9xodqw4u/
(Note: I'm actually using current version of Highstock, but the fiddle is a minimal example)
Obligatory code (go to fiddle instead):
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart A',
},
chart: {
type: 'line'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
series: [
{
name: 'Line',
type: 'line',
data: [
[1072915200000, 8000],
[1104537600000, 9000],
[1136073600000, 10000],
[1167609600000, 11000],
[1199145600000, 12000],
[1230768000000, 13000],
[1262304000000, 14000],
[1293840000000, 15000],
]
}
]
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart B',
},
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [
{
type: 'line',
name: 'The Line',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
},
{
type: 'column',
name: 'The Columns',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
}
]
});
Set xAxis' minPadding, maxPadding properties:
xAxis: {
type: 'datetime',
crosshair: true,
minPadding: 0.08,
maxPadding: 0.08
}
https://jsfiddle.net/9xodqw4u/1/
Be advised that if you use a navigator you would need a different approach - navigator sets extremes and padding is reset.

Disallow column dragging to certain positions with ExtJS

I have 5 columns on my grid, and I want to disallow users to be able to drag the columns on the right of the middle column to the left, and same goes disallow columns on the left dragged to the right.
My fiddle: https://fiddle.sencha.com/#fiddle/10ei
I have a column called No Crossing Zone, how I can disallow id and name from dragged to the right side of the No Crossing Zone, and disable Group 1 and Group 2 to the left side of the No Crossing Zone?
I can add any new key:value pairs to the data set if needed.
With this code, the column right of the No Crossing Zone will be moved back right of it if it is moved left of it. And vise versa:
1st solution:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.grid.Panel', {
columns: [
{
text: 'Id'
},
{
text: 'Name'
},
{
text: 'No Crossing Zone',
draggable: false
},
{
text: 'Group 1',
},
{
text: 'Group 2',
}],
listeners:{
columnmove: function (ct, column, fromIdx, toIdx, eOpts) {
var noCrossCol = undefined,
crossCol = undefined,
i = 0;
Ext.each(ct.getGridColumns(), function(col) { // There may be a better way to get "crossColIdx" and "crossCol"...
if(col.text == 'No Crossing Zone') {
crossColIdx = i;
crossCol = col;
return false;
}
i++;
});
console.log("fromIdx: " + fromIdx + "; toIdx: " + toIdx);
if((fromIdx <= crossColIdx) && (toIdx > crossColIdx)) {
console.log("moved too far");
ct.moveBefore(column, crossCol);
}
if((fromIdx >= crossColIdx) && (toIdx < crossColIdx)) {
console.log("moved too near");
ct.moveAfter(column, crossCol);
}
}
},
renderTo: Ext.getBody()
})
}
});
Second solution:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.grid.Panel', {
columns: [{
text: 'left part',
sealed: true,
columns: [{
text: 'Id'
}, {
text: 'Name',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}]
}, {
text: 'No Crossing Zone',
draggable: false
}, {
text: 'right part',
sealed: true,
columns: [{
text: 'Group 1',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}, {
text: 'Group 2',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}]
}],
flex: 1,
renderTo: Ext.getBody()
})
}
});
You could even delete the No Crossing Zone column.
(Edited after request in the comments)

Highcharts horizontal bar chart categories are sized incorrectly

I'm having a problem with Highcharts where each bar chart category is way too tall in a horizontal arrangement.
Here is an example:
The code used to generate the chart is as follows:
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'wordchart1',
defaultSeriesType: 'bar'
},
title: {
text: 'Word Frequency Distribution'
},
xAxis: {
categories: ['LIL POP SHOP','SWEET BOX','LITTLE BABY\'S ICE CREAM','SUGAR PHILLY','Please pick one:' ],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Word Frequency Analysis',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Word Frequency Analysis',
data: [89,43,32,24,3 ] }]
});
});
Any idea what may be the problem?
Thanks!
You can also define pointWidth: http://api.highcharts.com/highcharts#plotOptions.bar.pointWidth

Categories