I can't figure this one* out.
JS Fiddle here: https://jsfiddle.net/elange/wcvsco0o/9/
Scenario: Showing the trend of Latte purchases over time against all other purchases.
This is always true: Latte + Other = All
Requirements:
The Latte count shows along the top of the total, as shown.
The user can see the trend of "Lattes" on its own, separate from "All purchases"
Current Solution: ghost the "other" purchases data to raise "Lattes" up to match the total of "All" while still showing the right amount of lattes in the tooltip. (Ideally, the tooltip and all elements for "Other" would be hidden.)
*Problem: How do I take care of req. 2, and hide the "Other" series when the user hides "Total" using the legend?
Would be fine (as plan B) to use the button function, but can't make sense of the implementation of that button in this case. Extra points for making it work without using the button!
I appreciate the help!
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Latte Purchases'
},
subtitle: {
text: 'At The Coffee House'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1;
}
}
},
tooltip: {
split: true,
valueSuffix: ' visits'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'All',
stack: null,
color: '#616161',
fillColor: '#616161',
data: [44, 50, 63, 78, 82, 86, 100]
}, {
name: 'Latte',
color: '#26c4ee',
stack: true,
data: [19, 22, 24, 24, 28, 32, 34],
marker: {
fillColor: '#26c4ee'
}
}, {
name: 'Other',
fillColor: '#616161',
showInLegend: false,
showPoint: false,
linkedTo: 'Total',
stack: true,
data: [25, 28, 39, 54, 54, 54, 66],
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}]
});
Related
I'm using Grouped by column highcharts. ex:
https://jsfiddle.net/2bvudw1m/
Is there a way where I can show datalabels representing the y count(at the top of the column series) and the dataLabel name(at the bottom) for a column?
For example: this is my series data:
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}]
i want to show 2 things:
count representing every serie
DataLabel of that serie
So far I have this:
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Apples2', 'Oranges2','Apples3', 'Apple33'],
offset: 30
},
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
},
column: {
stacking: ''
},
},
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}
]
});
});
https://jsfiddle.net/nec89t56/2/
however this does not work as when I try to add both the values it either adds the y count or the name. Is there a way to add both when the column is grouped: true and stacking: ""
Note: I cannot do stacking as "normal" as then it'll stack and not group, which is not what I want.
any ideas?
You can add multiple dataLabels by defining dataLabels as an array of objects where each object is a separate config for each data label.
Demo: https://jsfiddle.net/BlackLabel/op4ehx8m/
plotOptions: {
series: {
dataLabels: [{
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}, {
enabled: true
}]
},
column: {
stacking: ''
},
},
I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):
The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):
I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:
const options: Highcharts.Options = {
chart: {
type: 'spline',
spacingLeft: 40,
spacingRight: 40,
},
title: {
style: {
display: 'none',
},
},
subtitle: {
style: {
display: 'none',
},
},
credits: {
enabled: false,
},
legend: {
itemDistance: 20,
itemStyle: {
color: '#7990A1',
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
lineWidth: 1,
},
shadow: true,
},
},
series: [{
name: 'test1',
type: 'spline',
color: '#576A7B',
data: [23, 3, 33, 54, 29, 38],
},
{
name: 'test2',
type: 'spline',
color: '#FE7B1A',
data: [45, 21, 76, 43, 67, 59],
},
{
name: 'test3',
type: 'spline',
color: '#00BAFF',
data: [7, 19, 5, 9, 12, 11],
},
{
name: 'test4',
type: 'spline',
color: '#000000',
data: [40, 3, 71, 20, 28, 31],
},
],
yAxis: {
title: {
style: {
display: 'none',
},
},
showFirstLabel: false,
},
xAxis: {
categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
},
};
Used by rendering component:
<HighchartsReact highcharts={Highcharts} options={options} />
Help will be greatly appreciated.
I am trying to join the nodes of the x axis and the y axis of the area spline chart. Here is my fiddle and also I need to move title and subtitle at the left corner and need to integrate dropdown. Basically I need graph something like this .
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: 'Total Visitors',
x: 0,
},
subtitle: {
text: 'This is all users that visited your site',
x: 0,
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
series: {
marker: {
enabled: false
},
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
lineColor: '#8b8bff',
color: '#c5c6ff',
showInLegend: false,
lineWidth: '4px',
name: 'John',
data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
}]
})
Kindly help
Thank you!!!
To start axes ticks in the same place set tickmarkPlacement to on and also set min and max.
To move title and subtitle to the left corner use align property:
title: {
...,
align: 'left'
},
subtitle: {
...,
align: 'left'
},
xAxis: {
tickmarkPlacement: 'on',
min: 0.5,
max: 10.5,
...
}
Live demo: https://jsfiddle.net/BlackLabel/w7p6rL8o/
API Reference: https://api.highcharts.com/highcharts/title.align
In highchart area chart, how could I set the area color above certain value to different color?
My target graph is like this:
However, what I see right now is like this:
http://jsfiddle.net/brianpchsu/0kwgocp4/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
min: 0,
max: 100,
pointRange:10,
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'Power'
}
},
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 0,
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
series: [{
data: [
[0, 2500],
[10, 2600],
[20, 2700],
[30, 2800],
[40, 2900],
[50, 3000],
[60, 3100],
[70, 3200],
[80, 3300],
[90, 3400],
[100, 3500],
],
color: '#FF0000',
negativeColor: '#1B8753',
threshold: 3000
}]
});
});
You could use zones.
Example: http://jsfiddle.net/0kwgocp4/1/
zones: [{
color: '#1B8753',
value: 3000
},{
color: '#FF0000'
}]
I've been tasked with generating charts that would display a BarRange and list additional points in the range. I've been looking at the examples for Highcharts, and like the inverted ColumnRange they show here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
and here:
http://jsfiddle.net/Q2JMF/2/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
}]
});
but what I need is not just a range high/low with an x point value, I need a high/low with several other points marked (preferably as a line) within the bar.
Think about it like quartiles and average. I want to display the range of values in my series and mark the 25th%, median, 75th% and average as line markers within the high/low bar range.
I have not been able to find any examples of marking points within a bar range. Is this something that can be done with Highcharts? Can you show me an example of how to achieve this?
Edit:
I've found that I can simulate what I'm after by adding additional series to the chart data. I mocked that up by modifying the second fiddle above:
http://jsfiddle.net/tLucL6mq/1/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
enableMouseTracking: false,
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
},{
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#000000',
radius: 6,
symbol: "square"
},
name: "Inclusive data points",
type: "scatter",
data: [[2,6.25],[2,6.6],[2,6.9],[1,7.2],[1,7.6],[1,7.9]]
},{
marker: {
fillColor: '#FFFF00',
lineWidth: 2,
lineColor: '#000000',
radius: 5
},
name: "Data points with Outliers",
type: "scatter",
data: [[2,5.9],[2,6.4],[2,6.7],[2,7.15],[1,6.8],[1,7.5],[1,7.8],[1,8.2]]
}
]
});
That looks pretty good, but I'd like to have one series that defines the range and lists points to be marked within the range.
If I have to use separate ranges like this, that's ok, but I would love the ability to mark the Inclusive data points using a line within the range rather than circle or square markers.