I am trying to create a single TreeMap with multiple series for which I have created JS-Fiddle
Series : 1 look like below
For every point a color has been defined. But in my case it would be difficult to define no of Colors.
The dataset for below treemap is a below
var _Dataset1
= [{
name: 'A',
value: 6,
color: '#80FF00'
}, {
name: 'B',
value: 6,
color: '#ADFF30'
}, {
name: 'C',
value: 4,
color: '#00FF7F'
}, {
name: 'D',
value: 3,
color: '#90EE90'
}, {
name: 'E',
value: 2,
color: '#8EBC8E'
}, {
name: 'F',
value: 2,
color: '#3CB371'
}, {
name: 'G',
value: 1,
color: '#2E8A57'
}];
Series 2 : Look like below, it works purely works with the color no assigned t the datapoint.
The dataset for the above is as follows.
var _Dataset2
= [{
name: 'mango',
value: 6,
color:1
}, {
name: 'Mango1',
value:36,
colorValue: 22
}, {
name: 'Orange',
value: 4,
colorValue: 3
}, {
name: 'Pomgranate',
value: 3,
colorValue: 4
}, {
name: 'Guava',
value: 2,
colorValue: 5
}]
The style for the above to series (Treemap)should look the below on.
The fiddle for the same is here
colorValue property can be used only when color axis (included in heatmap module) is defined for the chart. Color axis is rendered in place of the legend and it's not possible to use the legend anymore.
I'd suggest to use color property for the points of your second series.
API reference: https://api.highcharts.com/highcharts/series.treemap.data.colorValue
Edit:
After I checked this issue more carefully I noticed that colorAxis.showInLegend causes that series legend items don't show up.
I reported it and proposed a workarond here: https://github.com/highcharts/highcharts/issues/8140
Related
I would like to make the color of the slices dependend of the category['A','B','C','D']. Example, if the category 'B' is in the dataset, it should always be orange. My example doesn't work because I use the keys attribute in combination with data and it should be category. I don't seem to find a way doing this if at all possible?
{
series: [{
keys: ['y', 'color'],
data: [
['A', 'red'],
['B', 'orange'],
['C', '#abcf44'],
['D', '#acb222']
]
}]
}
Dataset:
Category %
A 10%
B 30%
C 10%
D 30%
Dataset
Example pie
You can define your data as an array of objects with defined name, color and y properties:
series: [{
type: 'pie',
data: [{
name: 'A',
color: 'red',
y: 10
}, {
name: 'C',
color: 'orange',
y: 30
}, {
name: 'D',
color: '#abcf44',
y: 10
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/jenfgwdk/
API Reference: https://api.highcharts.com/highcharts/series.pie.data
Why isn't the plotLine being drawn on the chart? I've been trying to figure this out for at least 2 hours.
The goal is to add a plotLine in line with a candlestick at any given index (100 in the example). So candle at index 100 in the ohlcarray would be highlighted in the chart. To do this I set the value of the plotLine to 100. Am I doing it wrong?
I really appreciate your help.
// ASSUME WE HAVE 300 BARS
const symbol = 'APPL';
const volume = [ ... ];
const ohlc = [ ... ];
Highcharts.stockChart('chart', {
cropThreshold: 500,
xAxis: {
plotLines: [{
color: 'red',
dashStyle: 'longdashdot',
value: 100,
width: 1,
zIndex: 5
}],
},
series: [{
type: 'candlestick',
id: `${symbol}-ohlc`,
name: `${symbol} OHLC`,
data: ohlc,
}, {
type: 'column',
id: `${symbol}-volume`,
name: `${symbol} Volume`,
data: volume,
yAxis: 1,
}]
});
You need to remember that your xAxis type is set as datetime, so 100 value is just a few seconds after 1 Jan 1970. To make it work you need to set a date value that fits to the chart range.
Demo: https://jsfiddle.net/BlackLabel/1gwvcy9L/
I am trying to create TreeMap with multiple series, the series are getting plotted on the graph with both series clubbed together, but I want only one series to be displayed at a time. Basically legand can be used but for treemap it's showing values.
This is the jsfiddle I am trying to work on
JavaScript files used
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
The treemap should be updated as per the series selected.
Highchart Bound Using
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
enabled: true,
},
series: [{
name:"Series 1",
stack: 'aeroplanes',
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A -Series 1',
value: 6,
colorValue: 1
}, {
name: 'B -Series 1',
value: 6,
colorValue: 2
}, {
name: 'C -Series 1',
value: 4,
colorValue: 3
}, {
name: 'D -Series 1',
value: 3,
colorValue: 4
}, {
name: 'E -Series 1',
value: 2,
colorValue: 5
}, {
name: 'F -Series 1',
value: 2,
colorValue: 6
}, {
name: 'G -Series 1',
value: 1,
colorValue: 7
}]
},
// Second Series
{
name:"Series 2",
type: 'treemap',
stack: 'aeroplanes2',
layoutAlgorithm: 'squarified',
visible:true,
data: [{
name: 'AA -Series 2',
value: 16,
colorValue: 2
}, {
name: 'BB -Series 2',
value: 26,
colorValue: 2
}, {
name: 'Cc -Series 2',
value: 14,
colorValue: 2
}, {
name: 'Dd -Series 2',
value: 13,
colorValue: 2
}, {
name: 'Ee -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Ff -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Gg -Series 2',
value: 11,
colorValue: 2
}]
}],
title: {
text: 'Highcharts Treemap'
},
plotOptions: {
treemap: {
stacking: 'percent'
}
},
});
By default showInLegend equals to false for treemap series - it needs to be enabled manually. In legendItemClick event I handled series visibility toggling:
plotOptions: {
treemap: {
showInLegend: true,
events: {
legendItemClick: function() {
this.chart.series.forEach((s) => s.setVisible());
return false;
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/0n49vv74/
API references:
https://api.highcharts.com/highcharts/plotOptions.treemap.events.legendItemClick
https://api.highcharts.com/highcharts/plotOptions.treemap.showInLegend
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I'm using a stacked percentage bar chart in Highcharts. (This jsfiddle is similar to our chart, derived from an example on the Highcharts site.)
What I'd like to do is add another set of "category" labels on the right side of the chart. Where the left side has labels for each bar, I'd like to show an average on the right. (Calculating this average and putting it in the Highcharts configuration data is done on the server side; in the fiddle I've just hard-coded some dummy values.)
I've tried using multiple x-axis configurations, with the averages categories marked opposite: true to put them on the right side. I can see that adding this is changing the chart, especially if I don't put them on opposite, but the labels don't actually show in any configuration I've tried. Is this possible? If so, what do I need to do that I'm not yet doing?
This is the configuration in the jsFiddle example:
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}],
yAxis: {
min: 0,
title: {
text: 'Percent fruit consumption'
}
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You have the correct axis set up, but currently the chart doesn't know what to do with the second axis.
Highcharts requires that an axis has either a data series attached to it, or that it is linked to another axis that does, in order to display it.
If you add a linkedTo property, it will work as required:
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
linkedTo: 0, // <-- now the chart will show it, as long as axis 0 is able to be shown
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}]
Updated fiddle:
http://jsfiddle.net/jlbriggs/z4zkm8v5/2/
I'm trying to tweak a Highcharts scatter plot with this date series
series: [{
data: [[1,2],[2,5]]
}]
so that i can put a name on each point, I want to show the name in the tooltip.
The API doc says an object of named values can be defined like this
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
but it seems the x and y values are not picked up. See my jsfiddle example.
This answer works for Highcharts 4.1.9.
Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.
Your mileage may vary for other versions.
plotOptions: {
scatter: {
dataLabels: {
format: "{point.name}",
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Projects',
data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
}]
What are the key points?
Ensure that the scatter.dataLabels is enabled and the format is {point.name}
Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}
As mentioned in this comment, what works for me in Highcharts 5.0.6 is:
{
type: 'scatter',
tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).
If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant. Also, you cannot have two points with different 'name' at the same x position.
I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.
Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather
Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.
To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing the series name as follows:
chart: {
type: "scatter",
}
tooltip: {
headerFormat: '',
pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},