How to remove the grid line overlappings in highcharts? - highcharts

Is there a way to remove the pixels at the edge of yAxis gridLine in left of the left xAxis gridLine?
See example: http://jsfiddle.net/48LvK/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginRight: 130,
marginBottom: 25
},
"xAxis": {
"tickWidth": 0,
"gridLineWidth": 1,
"gridLineDashStyle": "ShortDot",
"gridLineColor": "#c1c2c3",
"labels": {
"enabled": false
},
},
"yAxis": {
},
"plotOptions": {
"area": {
"fillColor": "transparent",
"marker": {
"enabled": false
}
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
});


You'll want to add startOnTick: true to your xAxis
http://jsfiddle.net/sppRL/
"xAxis": {
"tickWidth": 0,
"gridLineWidth": 1,
"gridLineDashStyle": "ShortDot",
"gridLineColor": "#c1c2c3",
"labels": {
"enabled": false
},
"startOnTick": true
},
What you're seeing aren't actually tick marks, they are the extension of the y-axis to the left of the first xAxis tick.
http://api.highcharts.com/highcharts#xAxis

Related

Highchart Donut chart not circular

I'm using Highchart to create a donut chart with a rounded corner. Unfortunately, the chart is not fully circular.
var data2 = [
{
"data": [
{
"name": "Positve",
"y": 50,
"color": "#2CA02C",
"sliced": true
},
{
"name": "Negative",
"y": 25,
"color": "#B23333",
"sliced": true
},
{
"name": "Neutral",
"y": 25,
"color": "#E5CF73",
"sliced": true
}
]
}
]
window.mychart = Highcharts.chart('container', {
chart: {
type: 'pie',
plotShadow: false,
},
credits: {
enabled: false
},
plotOptions: {
pie: {
innerSize: '100%',
borderWidth: 10,
borderColor: null,
slicedOffset: 6,
dataLabels: {
connectorWidth: 0,
enabled: false
}
}
},
title: {
verticalAlign: 'middle',
floating: true,
text: ''
},
legend: {
},
series: data2,
});
Here is the jsfiddle link to it:
JsFiddle

Only one point can be sliced, so use data without the sliced property or set slicedOffset to 0.
"data": [{
"name": "Positve",
"y": 50,
"color": "#2CA02C"
},
{
"name": "Negative",
"y": 25,
"color": "#B23333"
},
{
"name": "Neutral",
"y": 25,
"color": "#E5CF73"
}
]
Live demo: http://jsfiddle.net/BlackLabel/1usgc4a6/
API Reference:
https://api.highcharts.com/highcharts/series.pie.data.sliced
https://api.highcharts.com/highcharts/series.pie.slicedOffset

Highchart Pattern fill

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>

Why Highchart area color is black?

I use Highchart with areaspline type and my problem is the area is got be blacked or gray based on fillOpacity in plotOptionsp property. I use this in different syntax type but the result is same.
For example :
plotOptions: {
area: {
fillOpacity: 0.5,
},
}
or :
plotOptions: {
series: {
fillOpacity: 0.5,
},
}
You can see the screenshot of result:
And here is my code:
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
What should I do to resolve this problem?

Negative Fill color in AreaSpline Graph

I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M

Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});

highcharts disable certain labels

i will like the possibility of disabled some labels of my chart
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Year 2009',
data: [873, 614, 4054, 732, 34]
}, {
name: 'Year 2010',
data: [573, 1500, 4054, 732, 34]
}, {
name: 'Year 2012',
data: [373, 1380, 4054, 732, 34]
}]
});
});
});
http://jsfiddle.net/tkGFr/
for example, this chart will show all the labels and i will like the possibility of make only enabled 2 or 3 (year 1800, 1900 and 2009) of them but always maintaining the other options (year 2008, 2010 and 2012)
is this possible?
i appreciate your help and advice :D

As I assume, you would like to have enabled "year 1800, 1900 and 2009" in legend and displayed in chart, but other only in legend? If yes you can use visible parameter
{
name: 'Year 1800',
visible: false,
data: [107, 31, 635, 203, 2]
}

Even showInLegend: false; can be used; if want to hide in legends.

Resources