Related
I need to be able to apply background coloring (and text coloring to maintain contrast) to category labels.
I couldn't find an easy way to set each category label independently and came up with a working solution but now the width of my label column is too wide and applying marginLeft doesn't work.
First is there an easier way to achieve what I want or a solution to the width.
Here's the result:
and fiddle can be found here
Highcharts.ganttChart('container', {
chart: {
// marginLeft: 400,
events: {
load: function() {
for (var tickPos in this.yAxis[0].ticks) {
console.log(tickPos);
var ch = this.yAxis[0].chart;
var tick = this.yAxis[0].ticks[tickPos];
var label = tick.label;
if (typeof label !== "undefined") {
var text = label.textStr;
var obj = JSON.parse(text);
var element = label.element;
element.textContent = obj.name;
if (typeof obj.background !== "undefined") {
element.style["background-color"] = obj.background;
}
if (typeof obj.color !== "undefined") {
element.style["color"] = obj.color;
}
}
}
}
}
},
title: {
text: 'Highcharts Gantt Chart'
},
subtitle: {
text: 'With linked to split'
},
xAxis: {
minPadding: 0.05,
maxPadding: 0.05
},
"yAxis": [{
"scrollbar": {
"enabled": true
},
labels: {
useHTML: true
},
"uniqueNames": true
}],
tooltip: {
outside: true
},
rangeSelector: {
enabled: true,
selected: 5
},
time: {
useUTC: true
},
plotOptions: {
column: {
grouping: true
}
},
"series": [{
"name": "main",
"tooltip": {
"headerFormat": null
},
"data": [{
"name": '{"name": "Color prep and printing", "background":"green", "color":"white"}',
"id": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1582934400000,
"color": {
"patternIndex": 0
}
}, {
"name": '{"name": "Send to color house", "background":"blue", "color":"white"}',
"id": "_dqkmv8WXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1580428800000,
"duration": 30
}, {
"name": '{"name": "Generate proofs", "background":"teal", "color":"white"}',
"id": "_dq3hkMWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1578614400000,
"end": 1579651200000,
"duration": 12,
"dependency": [{
"to": "_dqkmv8WXEeeTdKTuQU2hRA"
}]
}, {
"name": '{"name": "Print and ship", "background":"crimson"}',
"id": "_drLDlcWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1581292800000,
"end": 1582934400000,
"duration": 19,
"dependency": [{
"to": "_dq3hkMWXEeeTdKTuQU2hRA"
}]
}],
"dataLabels": [{}, {
"enabled": true,
"align": "right",
"format": "{point.duration}"
}]
}],
});
To increase the width, you can set width style:
yAxis: {
labels: {
useHTML: true,
style: {
width: '300px',
textOverflow: 'ellipsis'
}
},
...
},
Live demo: https://jsfiddle.net/BlackLabel/nkz9xmh0/
API Reference: https://api.highcharts.com/gantt/yAxis.labels.style
I have a combined xrange and area chart, where I cannot get the area plot to go to the bottom of the chart view.
This is what I would like:
But this is what I'm getting:
Any help would be greatly appreciated.
https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/
Highcharts.chart('container', {
"chart": {
"borderWidth": 0,
"zoomType": "x",
"animation": false,
"scrollablePlotArea": { "scrollPositionX": 1 },
"height": 200,
"spacing": [0,0,0,0]
},
"scrollbar": { "enabled": true },
"time": { "useUTC": false },
"title": { "enabled": false },
"legend": { "enabled": false },
"colors": [ "#0032FF" ],
"credits": { "enabled": false },
"plotOptions": {
"area": { "threshold": null },
"xrange": { "minPointLength": 1 }
},
"xAxis": {
"type": "datetime",
"labels": { "overflow": "justify" },
"title": { "text": "Date" }
},
"yAxis": {
"lineWidth": 1,
"tickWidth": 1,
"alternateGridColor": "#F2F2F2",
"title": { "enabled": false },
"categories": [ "Closed", "Open" ],
"max": 1,
"min": -1
},
"tooltip": {
"borderRadius": 6,
"borderColor": "#0032FF",
"useHTML": true
},
"series": [
{
"name": "Proximity",
"type": "xrange",
"turboThreshold": 0,
"borderColor": "gray",
"animation": 0,
"pointWidth": 20,
"colors": [
"#0032FF",
"#0b5668"
],
"data": [
{ "x": 1567077909855, "x2": 1567083603287, "y": 1 },
{ "x": 1567077924011, "x2": 1567077924011, "y": 0 },
{ "x": 1567083619442, "x2": 1567083619442, "y": 1 }
]
},
{
//"turboThreshold": 1000,
"type": "area",
"color": "#f9d5d5",
"lineWidth": 0,
"animation": 0,
"data": [
{ "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
{ "x": 1566728240265, "y": 2, "name": "Loss" },
{ "x": 1567077909855, "y": 2, "name": "Gain" },
{ "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
{ "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
{ "x": 1567085295420, "y": 2, "name": "Loss" },
{ "x": 1567085533152, "y": 2, "name": "Gain" },
{ "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
]
}
]
});
Instead of area series type use xAxis.plotBands:
xAxis: {
type: 'datetime',
plotBands: [{
from: 1567079711855,
to: 1567077909855,
color: '#f9d5d5'
}, {
from: 1567082015102,
to: 1567079910825,
color: '#f9d5d5'
}]
}
Demo:
https://jsfiddle.net/BlackLabel/y706czmo
API reference:
https://api.highcharts.com/highcharts/xAxis.plotBands
Highcharts line chart, how to render across plot area.
Trying to render the line chart using HighCharts library to span across the entire plotting area. Using xAxis.min was able to make sure the start is from 0 on xAxis, however, not able to figure out how to make it end where chart plot area ends.
$(function() {
$('#container').highcharts({
"chart": {
"margin": null,
"stacking": "normal",
"height": "250px",
"animation": false,
"events": {}
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"inside": true,
"align": "right",
"format": "",
"style": {}
},
"inside": true
}
},
"title": {
"text": null
},
"subtitle": {
"text": null
},
"xAxis": {
"title": {
"text": null,
"align": "high",
"rotation": 0,
"style": {},
"y": null,
"x": null
},
"plotLines": [],
"categories": [
"2019-06-10",
"2019-06-17"
],
"tickInterval": 1,
"tickPositions": [
1
],
"labels": {
"style": {},
"useHTML": true,
"align": ""
},
min: 0.5
},
"legend": {
"enabled": true,
"layout": "horizontal",
"align": "center",
"verticalAlign": "bottom",
"floating": false,
"x": 0,
"y": 0,
"symbolPadding": null,
"symbolRadius": null,
"itemStyle": {},
"itemDistance": null
},
"yAxis": [{
"title": {
"text": "",
"align": "high",
"rotation": 0,
"style": {}
},
"labels": {
"format": "{value}",
"style": {}
},
"opposite": false,
"yAxis": 0,
"lineWidth": 1,
"gridLineColor": "#e6e6e6",
"gridLineWidth": 1,
"gridLineDashStyle": "solid",
"index": 0
}],
"tooltip": {
"enabled": true,
"followPointer": false,
"shared": false
},
"credits": {
"enabled": false
},
"series": [{
"type": "line",
"name": null,
"fillOpacity": 0,
"color": "#0077bc",
"fillColor": "#0077bc",
"opposite": false,
"yAxis": 0,
"legendIndex": 1,
"marker": {
"enabled": true
},
"dashStyle": "Solid",
"data": [{
"y": 396,
"toolTipData": "<div>Times on Air : 396</div><br/>"
},
{
"y": 468,
"toolTipData": "<div>Times on Air : 468</div><br/>"
}
],
"_symbolIndex": 0
}]
});
});
https://jsfiddle.net/fzg0evns/
Instead of using dates as x-axis categories you can add a date to point x property and define x-axis type = "datetime". Check the demo posted below.
Code:
"xAxis": {
"type": "datetime",
...
},
"series": [{
...
"data": [{
"y": 396,
"x": new Date('2019-06-10').getTime(),
"toolTipData": "<div>Times on Air : 396</div><br/>"
},
{
"y": 468,
"x": new Date('2019-06-17').getTime(),
"toolTipData": "<div>Times on Air : 468</div><br/>"
}
]
}]
Demos:
With categories, tickInterval, and tickPositions.
Without them.
API reference:
xAxis.type
https://api.highcharts.com/highcharts/series.line.data.x
I'm trying to use a pattern as a columnrange to allow the bar chart to work.
The pattern shows up but doesn't use the predefined pattern, so it's only solid blue. Normally it uses the defined pattern which is striped and works perfect on scattercharts and so on.
Here is a snippet showcasing what i mean:
Highcharts.chart('logicalCapacity', {
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [
{ "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "", pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [[50, 90]], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<div id="logicalCapacity"></div>
Hope that someone can point me in the right direction?
You can use Version 1 of the Pattern Fill.
var gfxPath = 'https://raw.githubusercontent.com/highcharts/pattern-fill/master/graphics/';
var chart = new Highcharts.Chart({
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent',
renderTo: 'container'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [{
"name": "seen",
"color": "#d5d5d5",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [60, 35, 50],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
"name": "wrong",
"color": "#817f81",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [10, 20, 0],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
"name": "correct",
"color": "#000",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [10, 25, 40],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
type: 'columnrange',
"data": [
[50, 90]
],
color: {
pattern: gfxPath + 'pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
<script src="https://code.jquery.com/jquery-2.2.4.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://highcharts.github.io/pattern-fill/pattern-fill.js"></script>
<div id="container" style="height: 300px"></div>
With version 2
In columnrange data will be as
"data": [{
low: 50,
high: 90,
color: 'url(#highcharts-default-pattern-0)'
}]
Highcharts.chart('logicalCapacity', {
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [
{ "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "", pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [{
low: 50,
high: 90,
color: 'url(#highcharts-default-pattern-0)'
}], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<div id="logicalCapacity"></div>
is it possible in highchart to add the legend in each column with keeping
the value or label of each coulmn on top of the column like the attached image and this is my code on jsfiddle enter link description here
$('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"format": "${y}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}]
});
You can use the plotOptions.series.dataLabels.formatter instead of format:
dataLabels: {
enabled: true,
useHTML: true,
y: 30,
formatter: function() {
return "$" + this.y + "<br><br><br>" +
"<div style='-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);'>" +
this.series.name + "</div>";
}
}
You can tell the chart exactly the way you want the labels to be shown. this.y is the dollar values and this.series.name is the name of the series which are 2014 and 2015. y: 30 is where the label should be placed in respect to the top of the column. Here's a DEMO.
PS: The problem is that you cannot have two datalabels for each column. You either have to set the location for the top label (as mentioned in my answer) or set it for the bottom labels in this example. As you can see there are some problems in each example, but you can't have both. However there could be a workaround like this, but its not clean.
You can try to use stackLabels. Of course that solution will work only when you don't use stacking at all. See demo: http://jsfiddle.net/LLExL/4855/
Code:
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return "$" + this.total;
}
}
},
"plotOptions": {
"series": {
stacking: "normal",
"dataLabels": {
"enabled": true,
rotation: -90,
"format": "{point.series.name}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
Regarding aligning labels to the bottom, see this question.
I made some changes on solution of #Raeen to be exactly what i want
and here is the example demo
enter code jQuery('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
title:{
text:''
},
tooltip: {
enabled: false
},
"plotOptions": {
"series": {
"dataLabels": {
"inside":true,
"enabled": true,
useHTML: true,
y: 30,
formatter: function() {
var html ='';
labelHeight = this.point.shapeArgs.height-15;
html += '<div class="data-label-wrapper" style="height:'+labelHeight+'px;">';
html += '<span style="color:'+this.series.color+';">$'+this.y+'</span>';
html += '<span class="serie-name" style="top:'+(labelHeight-25)+'px">'+this.series.name+'</span>';
html += '</div>';
return html ;
}
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}] });
and now what i need if its possible to controll the number of gridlines numbers
to be like 3 instead of 8 that would be perfect.