I have tested the HighCharts heatmap (heatmap.js) charts. They work fine for me, but there is one situation where I would like to set the cell colors myself, individually - i.e. NOT using the colorAxis settings.
Is there an easy way to do that without messing with the colorAxis stops ? E.G. by setting the color directly in the data series ?
Arguably this defeats the idea of a real "heatmap" but would be the shortest route for me to address a specific requirement (instead of building a HTML table with colored cells).
"
Note finally this is not the same question as "how do you change the color of cells in highcharts heatmap?"
Yes, you can always set color directly in the point config, see: http://jsfiddle.net/c2WgP/
$('#container').highcharts({
chart: {
type: 'heatmap',
inverted: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: -5
},
series: [{
data: [
[0, 0, -0.3],
[0, 1, 0.6],
[0, 2, 1.8], {
x: 0,
y: 3,
z: 0.5,
color: 'green'
}]
}]
});
Just an FYI, the above code works, but the linked fiddle is broken because of something in that linked version of Highcharts. If you make the small tweak of using the latest Highcharts.js, it worked for me:
Simply replace:
<script src="http://code.highcharts.com/3.0.10/highcharts.js"></script>
with
<script src="http://code.highcharts.com/highcharts.js"></script>
Seen here: http://jsfiddle.net/joelhnatow/bnL77dr8/
Related
Is it possible to make echarts line chart with 1 line painted in different colors? For example if value <= 0 the color is red, if > 0 the color is green?
Echarts has an option called visualMap that does exactly what you are looking for.
visualMap doc
visualMap code example (I selected the example that fits best, but there are others)
In your case you'll have something like that :
visualMap: {
show: false, // Wether to show the legend or not (default: true)
pieces: [
{
min: -9999, // Normally not needed but doesn't work without that (1)
max: 0,
color: '#F35E07' // Red
},
{
min: 0,
color: '#93CE07' // Green
},
],
outOfRange: {
color: '#F35E07'
}
},
It'll split your line in 2 pieces :
below 0 (written max: 0) : red
above 0 (written min: 0) : green
In addition, the visualMap option has more to offer : you can have more than 2 pieces (like in this example), have a smooth gradient instead of pieces (using type: 'continuous' like in this example), and many other things that are explained in its doc.
(1) Note about the bug: Normally if you don't specify min or max,
it's set to -Infinity or Infinity. But here you have to specify
min AND max in one of the two pieces (I don't know why).
If you consider plotting two charts and ignoring some of its points with '-', you can achieve the same visual result of a multicolored line chart.
Although the documentation does not provide an immediate example of how to color specific segments of a line chart, it actually instructs about how you can use empty data,
While there are empty elements, the lines chart will ignore that point without passing through it----empty elements will not be connected by the points next. In ECharts, we use '-' to represent null data, It is applicable for data in other series.
With that in mind, by overlaying two equal charts and emptying some points, you can actually construct the logic of a multicolored chart. Notice that it is better if you can do it programmatically so that you can vary the number of line segments to be colored.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[-20, -20],
[-10, 30],
[0, 40],
['-', '-'],
['-', '-']
],
type: 'line',
lineStyle: {
color: "red"
}
},
{
data: [
['-', '-'],
['-', '-'],
[0, 40],
[10, 100],
[20, 60]
],
type: 'line',
lineStyle: {
color: "green"
}
}
]
};
option && myChart.setOption(option);
.as-console-wrapper { max-heght: 100% !important }
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.js"></script>
<body>
<div id="main" style="width: 225px;height:225px;"></div>
</body>
I am trying to make chart, sort of like a pie chart, but with each slice being the same size, and having a percentage of it filled.
Something like this.
My question is similar to this one: Pie chart with different fill percentage.
But it is 4 years old so I thought I would ask again.
I have tried using Canvasjs, Google charts, and highcharts but none of them support anything similar. I also want to have the slices functioning as buttons that can rotate the chart, having the selected one being positioned in the bottom.
You can achieve that result in Highcharts. Each slice should be a different series with different size. Each series should have points in the number of the series, all points should be invisible except the one - also, it is needed for disabling ignoreHiddenPoint so empty space will be drawn.
For example, you have an array of points ['20%', '30%'] - you need to map the points to series array:
[{
size: '20%',
keys: ['y', 'visible'],
data: [[1/2, true], [1/2, false]]
}, {
size: '30%',
keys: ['y', 'visible'],
data: [[1/2, false], [1/2, true]]
}]
You also might create an additional series which will be the background of the pie
const backgroundSeries = [{
size: '100%',
data: [{y: 1, color: 'rgba(0, 0, 0, 0.4)'}],
enableMouseTracking: false,
borderWidth: 0,
}];
For rotating the pie, you need to update startAngle property
chart.update({
plotOptions: {
pie: {
startAngle: startAngle
}
}
});
Live example and output
http://jsfiddle.net/1yjc4ogb/
I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}
As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});
As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/
Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.
The break down:
You can use gridZindex and backgroundColor/fillColor properties to produce the desired effect. Only issue is that the grid has to be displayed over graph.
The solution:
DEMO
The code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
More info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of *main plot only):
http://api.highcharts.com/highcharts#chart.plotBackgroundColor
*range selector areas will not be affected
To meet the various criteria you have asked for, I would accomplish this by creating a dummy series to create the gradient effect.
Example Result:
In this scenario, you will need to pre-process your data, and you will need to assign a max value for the y axis explicitly.
Example Code:
var max = 0;
var data1 = [...your data array...];
var data2 = [];
$.each(data1, function(i,point) {
max = point > max ? point : max;
});
max = Math.ceil(max * 1.1);
$.each(data1, function(i,point) {
data2.push((max - point));
});
You will then need to assign that max value as your yAxis max proeprty, and you may need to either set endOnTick: false, or otherwise account for the max resolving with your tickInterval:
yAxis: {
max:max,
endOnTick:false
}
Then for your dummy series, define the background color gradient.
We'll also set the showInLegend and enableMouseTracking properties to false so that it doesn't show in the legend or tooltip:
{
data: data2,
showInLegend:false,
enableMouseTracking:false,
fillColor : {
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
Fiddle Example:
http://jsfiddle.net/jlbriggs/mcp3trmk/
This ensures that the gradient will always match the data, as requested.
As you can see from this js fiddle you have to add this:
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : {
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
tooltip: {
valueDecimals: 2
}
}]
See the documentation for further information
I have a Highcharts area chart, with string categories on the X-Axis.
I want the chart to start at the left most edge of the x-axis and end at the rightmost edge, without any padding. In the image below, the red arrows show the spacing that I want to get rid of. Without text categories this is easily achievable, but with I just can't seem to figure it out.
Any help appreciated, thanks.
You can achieve the desired result by redefining labels.formatter on axis. jsFiddle is here.
But if you want to keep it simple and pass axis.categories in traditional way (I think that this is a way more better), I suggest you to use a tiny hack and redefine an Axis.init function. Try it on jsFiddle.
UPD: I've updated my previous fiddle a little. Check it out. I think that you can combine all my solution to get a nicer one.
You can use spacingLeft and spacingRight to set the spacing:
chart: {
renderTo: 'chart1',
type: 'area',
spacingLeft: -21,
spacingRight: -21,
spacingBottom: 1
},
A cleaner solution is to use the pointPlacement reference provided in the Highchart API.
Add pointPlacement: 'on' and you should be in business. (For reference, here is their example JSFiddle)
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']
},
series: [
{
name: 'name of series',
data: [0, 2, 0, 2, 0],
pointPlacement: 'on',
}
]
This solution worked for me, maybe it helps. I can't confirm whether or not this applies to other ways of inputting data.
Just add:
...
xAxis: {
startOnTick: true,
...
},
...
You need the following settings.
xAxis: {
plotLines: [{
value: 0,
color: '#color'
}],
tickmarkPlacement: 'on'
},
yAxis: {
lineWidth: 0,
}