I am rendering 4 columnRange in my HighChart and facing the problem that the small intervalles (one minutes intervall for example A has 12:51-12:52 and 12:56-12:57 )
are not being rendered when printing the result as png image. Is there any configuration in HighCharts to get around that?
https://jsfiddle.net/LLExL/7288/
Highcharts.chart('container',
{
chart: {
type: 'columnrange',
inverted: true,
height: 192,
spacingLeft: 10
},
credits: {
enabled: false
},
title: {
text: null,
style: {
"fontSize": "8px"
}
},
subTitle: {
text: null
},
legend: {
enabled: false,
},
plotOptions: {
series: {
pointWidth: 30
}
},
xAxis: {
min: 1,
max: 4,
categories: ['', 'A', 'B', 'C', 'D'],
title: {
text: null
},
labels: {
rotation: -45,
style: {
"fontSize": "7px"
}
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime',
title: {
text: null
},
labels: {
rotation: -45,
style: {
"fontSize": "6px"
}
},
tickInterval: 1800000,
gridLineWidth: 1
},
series: [{
data: [{
x: 1,
low: 1483336800000,
high: 1483336860000,
color: '#66ccff'
},
{
x: 2,
low: 1483336860000,
high: 1483337340000,
color: '#ff9966'
},
{
x: 1,
low: 1483337340000,
high: 1483337400000,
color: '#66ccff'
},
{
x: 2,
low: 1483337400000,
high: 1483337700000,
color: '#ff9966'
},
{
x: 1,
low: 1483337700000,
high: 1483339920000,
color: '#66ccff'
},
{
x: 3,
low: 1483339920000,
high: 1483341780000,
color: '#79d279'
},
{
x: 2,
low: 1483341780000,
high: 1483342260000,
color: '#ff9966'
},
{
x: 3,
low: 1483342260000,
high: 1483345080000,
color: '#79d279'
},
{
x: 1,
low: 1483345080000,
high: 1483345140000,
color: '#66ccff'
},
{
x: 3,
low: 1483345140000,
high: 1483346400000,
color: '#79d279'
},
{
x: 1,
low: 1483346400000,
high: 1483346460000,
color: '#66ccff'
},
{
x: 3,
low: 1483346460000,
high: 1483347420000,
color: '#79d279'
},
{
x: 1,
low: 1483347420000,
high: 1483347600000,
color: '#66ccff'
},
{
x: 2,
low: 1483347600000,
high: 1483347780000,
color: '#ff9966'
},
{
x: 1,
low: 1483347780000,
high: 1483348020000,
color: '#66ccff'
},
{
x: 3,
low: 1483348020000,
high: 1483348200000,
color: '#79d279'
},
{
x: 1,
low: 1483348200000,
high: 1483352460000,
color: '#66ccff'
},
{
x: 3,
low: 1483352460000,
high: 1483352640000,
color: '#79d279'
},
{
x: 1,
low: 1483352640000,
high: 1483352700000,
color: '#66ccff'
},
{
x: 3,
low: 1483352700000,
high: 1483353840000,
color: '#79d279'
},
{
x: 1,
low: 1483353840000,
high: 1483354920000,
color: '#66ccff'
},
{
x: 3,
low: 1483354920000,
high: 1483355160000,
color: '#79d279'
},
{
x: 1,
low: 1483355160000,
high: 1483359480000,
color: '#66ccff'
},
{
x: 3,
low: 1483359480000,
high: 1483361460000,
color: '#79d279'
},
{
x: 1,
low: 1483361460000,
high: 1483361520000,
color: '#66ccff'
},
{
x: 2,
low: 1483361520000,
high: 1483361580000,
color: '#ff9966'
},
{
x: 3,
low: 1483361580000,
high: 1483361760000,
color: '#79d279'
},
{
x: 1,
low: 1483361760000,
high: 1483361820000,
color: '#66ccff'
},
{
x: 2,
low: 1483361820000,
high: 1483362060000,
color: '#ff9966'
},
{
x: 1,
low: 1483362060000,
high: 1483364280000,
color: '#66ccff'
},
]
}]
}
);
Increase width of the exporting image.
exporting: {
chartOptions: {
chart: {
width: 1000
}
}
},
example: https://jsfiddle.net/LLExL/7294/
Related
I want to make the graph start at 0 (as shown in the picture) and have the string formatted according to the regular expression replace(/\B(?=(\d{3})+(?!\d))/g, " ") but all my attempts are unsuccessful.
chartOptions: {
colors: ['#3DC3FB', '#FF5252', '#D2F449', '#179877'],
title: {
text: "",
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
if (this.x > 0) {
return this.x;
} else return false;
},
},
plotOptions: {
series: {
enableMouseTracking: false,
states: {
hover: {
enabled: false
},
normal: {
animation: false
},
select: {
enabled: false
}
}
},
},
xAxis: {
gridLineWidth: 1,
tickmarkPlacement: 'on',
lineColor: "#A4A4A4",
min: 0,
categories: [null, "10 лет"],
top: 10,
right: -100,
title: {
style: {
color: "#A4A4A4"
}
},
},
yAxis: {
gridLineWidth: 0,
tickColor: 'undefined',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
lineWidth: 1,
lineColor: '#A4A4A4',
min: 3,
title: {
text: "Доход от инвестиций",
margin: 10,
align: "low",
style: {
color: "#A4A4A4"
},
y: -50,
},
labels: {
enabled: false,
},
},
legend: {enabled: false},
marker: {
enabled: false,
symbol: 'circle',
radius: 12,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
series: [
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -100,
y: 5,
enabled: true,
// useHTML: true,
format: `{point.y}/мес`,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
},
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#3DC3FB',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Акции",
data: [0, 550],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#FF5252',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Облигации",
data: [0, 366],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#D2F449',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Депозит",
data: [0, 275],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#179877',
lineColor: 'green',
lineWidth: 0
}
}
},
},
],
},
I am new to highcharts and have a hard time with huge documentation. help me please
Understood the cost of his sleep. For those who will be interested. So that the graph starts like in the picture.
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
and
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -50,
y: -10,
enabled: true,
format: `{point.y}/мес`,
pointFormat: ' <b>{point.y:,.0f}/мес</b>',
shared: true,
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},
When it comes to the place to start the chart in the category axis, you need to only change xAxis.min to 0.5
Sample code:
xAxis: {
min: 0.5,
tickmarkPlacement: 'on',
type: 'category'
},
Simplified demo:
https://jsfiddle.net/BlackLabel/jt1gqrnb/
Before the hover in the empty space
After the hover in the empty space
It consists of two simultaneous charts.
As I move the mouse over the empty space, the bottom chart becomes faint. I want nothing to happen in hover.
I searched the internet a lot for inactive and hover to false, and ... but none.
This is my chart info:
Highcharts.chart('stock-trading-process', {
title: {
text: ''
},
tooltip: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
visible: false
},
chart: {
backgroundColor: 'gray',
margin: [0, 0, 0, 0]
},
yAxis: [{
gridLineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
},
height: '50%',
lineWidth: 2,
}, {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: ''
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'line',
showInLegend: false,
color: '#00B1FC',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1, 1],
marker: {
enabled: false,
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
},
states: { hover: 'none' },
fillColor: '#F7F8FA'
}, {
type: 'column',
color: '#94E3FD',
pointWidth: 1,
showInLegend: false,
marker: {
enabled: true,
states: {
hover: {
enabled: true
},
inactive: {
opacity: 1
}
}
},
data: [1, 8, 6, 7, 4, 5, 9, 3, 2, 1, 7, 8, 5, 1, 2, 5, 9],
yAxis: 1,
states: { hover: 'none' }
}],
exporting: {
enabled: true
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
}
});
As I understood - setting the states.inactive.opacity to 1 on the series object is the solution which you are looking for.
states: {
inactive: {
opacity: 1
}
},
Demo: https://jsfiddle.net/BlackLabel/en5j4v31/
API: https://api.highcharts.com/highcharts/series.line.states.inactive.opacity
Am I right? If not, could you describe more precisely what do you have in mind?
Why doesn't it work for me?
Demo: https://jsfiddle.net/3uzfqs4m/
{
yAxis: [{
visible: false,
gridLineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
},
height: '50%',
lineWidth: 2,
}, {
visible: false,
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: ''
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'line',
showInLegend: false,
color: '#00B1FC',
data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
marker: {
enabled: false,
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
},
states: {
inactive: {
opacity: 1
}
},
states: { hover: 'none' },
fillColor: '#F7F8FA'
}, {
type: 'column',
color: '#94E3FD',
pointWidth: 1,
showInLegend: false,
marker: {
enabled: true,
states: {
hover: {
enabled: true
},
inactive: {
opacity: 1
}
}
},
states: {
inactive: {
opacity: 1
}
},
data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
yAxis: 1,
states: { hover: 'none' }
}],
chart: {
backgroundColor: '#F4F7FA',
margin: [0, -5, 0, -5]
},
title: {
text: ''
},
tooltip: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
visible: false
},
exporting: {
enabled: true
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
}
}
I have the following chart: https://jsfiddle.net/w7jm2n6u/
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x'
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
enabled: false
},
min: Date.UTC(2018, 10, 1)
},
yAxis: {
title: {
enabled: false
},
labels: {
formatter: function() {
return this.value / 1000;
}
},
max: 2000
},
tooltip: {
split: false,
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
series: [{
name: 'Exceeds',
color: '#0000FF',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 2000
},{
x: Date.UTC(2019, 0, 1),
y: 2000
}, {
x: Date.UTC(2019, 1, 1),
y: 2000
}, {
x: Date.UTC(2019, 2, 1),
y: 2000
}],
}, {
name: 'Meets',
color: '#00FF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 700
},{
x: Date.UTC(2019, 0, 1),
y: 800
}, {
x: Date.UTC(2019, 1, 1),
y: 700
}, {
x: Date.UTC(2019, 2, 1),
y: 800
}],
}, {
name: 'Minimum',
color: '#FFFF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 400
},{
x: Date.UTC(2019, 0, 1),
y: 400
}, {
x: Date.UTC(2019, 1, 1),
y: 400
}, {
x: Date.UTC(2019, 2, 1),
y: 400
}],
}, {
name: 'Below Minimum',
color: '#FF0000',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 100
},{
x: Date.UTC(2019, 0, 1),
y: 200
}, {
x: Date.UTC(2019, 1, 1),
y: 300
}, {
x: Date.UTC(2019, 2, 1),
y: 320
}],
},
{
name: 'Data',
color: '#000000',
type: 'line',
data: [{
x: Date.UTC(2019, 0, 3),
y: 50
},
{
x: Date.UTC(2019, 0, 15),
y: 500
},
{
x: Date.UTC(2019, 1, 4),
y: 1000
},
{
x: Date.UTC(2019, 1, 15),
y: 1400
},
{
x: Date.UTC(2019, 1, 28),
y: 1900
},
]
},
]
});
Ideally, I would like to be able to hover over each area and see a tooltip with the value at that point in time for each of the 4 areas. For instance, between January 1st and February 1st, the Below Minimum (red) value ranges from 200 to 300. If I were to put my mouse halfway between those dates, I would want to see 'Below Minimum: 250'. Is there a way to achieve this?
If not, I would at least like the current tooltip to always show the previous point value instead of whichever it is closest to. If I hover around 12/2018, I want to see the point from Sept 1, 2018, not January 1, 2019. Essentially these are start dates for the values and are only valid on or after the date.
You need to increase the density of points. Below you can find an example how you can do it programmatically:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series,
iterations = 2,
i = 0,
newData = [];
for (; i < iterations; i++) {
series.forEach(function(s) {
newData = [];
s.points.forEach(function(p, j) {
if (j) {
newData.push(
[
s.points[j - 1].x +
(p.x - s.points[j - 1].x) / 2,
s.points[j - 1].y +
(p.y - s.points[j - 1].y) / 2
],
[p.x, p.y]
);
} else {
newData.push([p.x, p.y]);
}
});
s.setData(newData, false);
});
this.redraw(false);
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/d8jq9bvh/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
As shown below:
Instead of that I want the x-axis labels to look something like this:
Without the GMT and time-zone. Sorry I am new to Highcharts !
EDIT: added code
Highcharts.theme = {
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
global: {
useUTC: false
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
Highcharts.setOptions(Highcharts.theme);
////////////////////
$('#high').highcharts({
chart: {
borderColor: '#EBBA95',
borderRadius: 20,
borderWidth: 2,
zoomType: 'x',
spacingTop: 40
},
title: {
text: 'Humidity/Temperature Graph',
x: -20, //center
y: 5
},
subtitle: {
text: 'Elemental Electronics | Click and drag to zoom',
x: -20,
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
categories: yearSeries,
},
yAxis: {
title: {
text: 'All points on one graph'
},
plotBands: [
{
color: 'orange', // Color value
from: 0, // Start of the plot band
to: -25 // End of the plot band
,label: {
text: 'Lower Range: 1 ppm',
color: '#ffffff',
align: 'left'
}
},
{
label: {
text: 'Upper Range: 5ppm',
color: '#ffffff',
align: 'left'
},
color: 'orange', // Color value
from: 75, // Start of the plot band
to: 100// End of the plot band
}
],
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'Temperature',
textColor: '#ffffff',
data: mySeriestemp
}
],
});
});
mySeriestemp and yearSeries are both from arrays that I got using:
for (var i = 0; i < year.length; i++) {
yearSeries.push(new Date(year[i]));
mySeriestemp.push(temp[i]);
}
update
As I seen your code you need to add following
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}
See the working fiddle with your code
Use this
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
}
}
formatter function needs to added here to show the labels in desired format
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}
Is it possible to start the line from the hinges base ?
I have looked everywhere and couldnt find a solution for it
here is my code
jQuery('#chart').highcharts({
colors: ['#f5781e', '#7b3186'],
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
},
chart: {
type: 'line',
marginRight: 0,
marginBottom: 35,
width: 700,
height: 280,
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['1','2','3','4','5','6','7','8'],
alternateGridColor: '#f4f6f5',
lineColor: '#000000',
lineWidth: 1,
min: 0,
},
yAxis: {
title: {
text: ''
},
labels: {
useHTML : true,
format: '<span class="axis"><span class="flright">{value}</span>אלף</span>'
},
tickInterval: 3,
max: 35.2,
plotLines: [{
value: 1,
width: 1,
color: '#000'
}],
lineColor: '#000000',
lineWidth: 1,
min: 0
},
plotOptions: {
series: {
pointStart: 0
}
},
tooltip: {
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
animation: true,
valueSuffix: ',000₪',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
formatter: function() {return '<b>₪' + this.x + this.y +'</b>';}
},
legend: {
enabled: false
/*****************
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
floating: true,
rtl: true,
y: 15,
margin: 10,
useHTML: true,
itemStyle: {
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
*******************/
},
series: [
{
name: 'b',
data: [0.5,1,1.5,2,2.5,3,3.5,4]
},
{
name: '<span class="abc">a</span>',
data: [4,8,12,16,20,24,28,32]
}
]
},function(chart) { //LOGO
chart.renderer.image('/images/small_logo.png', 670, 18, 31, 23).add();
}
);
here is an image of what i want to achieve
You just have to change you min value :
xAxis: {
...
min: 0.5,
...
},
Look at this : http://jsfiddle.net/yKHsD/
EDIT :
There is a better solution. It is caused by the categories option. You can avoid this problem by doing :
var xCategories = ['1','2','3','4','5','6','7','8'];
// ...
xAxis: {
....
tickmarkPlacement: 'on',
labels: {
formatter: function() {
return xCategories[this.value];
}
},
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
In this example, don't forget to remove the categories option. Here is an example : http://jsfiddle.net/yKHsD/1/