Is it possible to create a Highcharts plot background like the picture below? It's important it will adjust when the plot is zoomed in/out.
E.g. Using radialGradient, but without the "gradient" between the colors.
The example below is only a starting point using SVGrenderer:
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function(chart) {
var yAxis = chart.yAxis[0],
y = yAxis.top+yAxis.height,
x = chart.plotLeft,
h = yAxis.height;
svg = chart.renderer;
svg.arc(x,y,h/3,0,1.5*Math.PI,0)
.attr({
fill: '#dce6f2',
'stroke-width': 0,
zIndex: -1
}).add();
svg.arc(x,y,2*h/3,0,1.5*Math.PI,0)
.attr({
fill: '#c5d8f1',
'stroke-width': 0,
zIndex: -2
}).add();
svg.arc(x,y,h,0,1.5*Math.PI,0)
.attr({
fill: '#95b3d7',
'stroke-width': 0,
zIndex: -3
}).add();
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
If you don't need it to be x/y symmetrical, then it's easy:
chart: {
backgroundColor: {
radialGradient: {
cx: 0,
cy: 1,
r: 1
},
stops: [
[0, '#dce6f2'],
[.25, '#dce6f2'],
[.25, '#c5d8f1'],
[.50, '#c5d8f1'],
[.50, '#95b3d7'],
[.75, '#95b3d7'],
[.75, '#fff'],
[1, '#fff']
]
},
type: 'line'
},
http://jsfiddle.net/ndjnx2eh/9/
This will scale with the size of the chart.
If you need it to always be a quarter circle, it's not so easy.
Related
I am making a Highstock chart using Highcharts, I need the title on the top left corner, just like Highcharts does.
In highcharts I can do it using yAxis.title.align: 'high', as you can see in this snippet
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'yAxis.title.offset is set to zero'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
This doesn't work in a Highstock chart, using same options, as you can see on the following snippet:
Highcharts.stockChart('container', {
chart: {
type: 'column'
},
title: {
text: 'title offset is set to zero and align is high'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
top: "10%",
height: "90%",
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px"></div>
How can I aligne this text on the top-left side?
I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]
Please check the below jsfiddle.
http://jsfiddle.net/ErU8H/537/
var gfxPath = 'http://www.highcharts.com/components/com_demo/assets/demo/gfx/';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Pattern fill plugin demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotBands: [{
from: 100,
to: 200,
color: {
pattern: gfxPath + 'pattern3.png',
width: 6,
height: 6
}
}]
},
series: [{
type: 'area',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
fillColor: {
pattern: gfxPath + 'pattern1.png',
width: 6,
height: 6
},
states: {
hover: {
halo: {
size: 8,
opacity: 1,
zIndex:10,
attributes: {
fill: '#ffffff',
'stroke-width': 1,
stroke: '#0b9de8'
}
}
}
}
}, {
type: 'column',
data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
color: {
pattern: gfxPath + 'pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
The halo effect on point hover is not rendering properly in chrome and firefox only when we use pattern fill plugin. I ve to use patterns and same time wanted to implement halo effect on point hover. Any help on this?.
Simply set higher zIndex for a halo: http://jsfiddle.net/ErU8H/542/
states: {
hover: {
halo: {
attributes: {
zIndex: 10
}
}
}
}
I'm trying to put Y-Axis title on top right of the Y-Axis, right below the chart title. However, when I insert the axis title, the whole graph moves to the right. I tried to used spacingLeft to set the position of the chart, but nothing changes. Is there a way to keep the position of the chart even if I add the axis title?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Chart title',
y: -10
},
yAxis: {
title: {
text: 'aaaaaaaaaaaaaaaaaaa',
align: 'high',
rotation: 0,
x: 100,
y:-20
},
labels: {
align: 'high',
x: 0,
y: -5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
jsfiddle: http://jsfiddle.net/8m7rc/1/
Min Sun Song, you can use offset property to reduce that gap.
offset: -120,
I've updated you fiddle here
Hope this is what you are looking for.
You can set marginLeft property for a chart. See demo.
http://jsfiddle.net/nUCBj/1/
How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc... The datalabels are required. I can't just use the tooltip in it's place :-)
Thank you,
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
shadow: true,
borderRadius: 1,
useHTML: true,
padding: 1
}
}
},
series: [{
name: 'test',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{
name: 'test2',
data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
}]
});
});
The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it's own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.