I have a chart that is feeded with positive and negative values, and I thought that it was working perfectly, but suddenly I realize that the columns are not printed when all values are negative....Is there anything I am doing bad??
Here is my code:
new Highcharts.chart('av2', {
chart: {
type: 'column',
height: 500,
},
series: [{
name: 'Direct Purchase',
data: [ { y: -1.82, name: 'DK' }, { y: -19.8, name: 'DL' }]
}]
});
Mixed Values: https://jsfiddle.net/zowcqz09/6/
All Negative Values: https://jsfiddle.net/zowcqz09/5/
Best Regards,
You can use the yAxis options as workaround - Fiddle
Definitely a bug in v6. Even the official demo doesn't render anything if you change it to all negative values. You can use v5 until that is fixed:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
Edit: Fixed in v6.0.1 (https://github.com/highcharts/highcharts/issues/7228).
Related
I have an idea how I can improve the user experience by altering some of my charts. Basically I have a column chart, where I display some values per category. The last value I display is the average.
I want to display the average value as a dotted line in each category.
Paint picture of idea displayed as a single category
I have read the documentation more times than I'm happy to admit, but I have still not found a proper solution. My best attempt was to overload the circle symbol in the 'scatter'-series and then redraw it as an SVG.
Does anyone have an idea to how I should approach it? I feel the option must be there, and I'm just missing the forest for the trees.
Best regards,
You can use line series type with calculated data:
const averageData = [3.33, 3.33, 3.66];
const processedAverageData = [];
averageData.forEach((val, index) => {
processedAverageData.push([index - 0.4, val], [index + 0.4, val]);
// To create gaps between categories
processedAverageData.push(null);
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
series: [{
...
}, {
...
}, {
...
}, {
type: 'line',
data: processedAverageData,
dashStyle: 'dash',
marker: {
enabled: false
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/t3ejqvun/
API Reference: https://api.highcharts.com/highcharts/series.line
Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize
Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/
Which I am passing to:
series: [{
name: 'Fixed bugs',
data: fixed,
pointWidth: 40
}, {
name: 'Assigned Bugs',
data:assigned,
pointWidth: 40
}, {
name: 'Re-Opened Bugs',
data: Reopened,
pointWidth: 40
},
{
name: 'Closed Bugs',
data: closed,
pointWidth: 40
}]
to this chart and I have the data like this :
data: fixed=[3,5,5,8]
data:assigned=[0,1,0,0]
and follows. Now I want to show the column with zero value to... For me its not showing the column value with zero.
minPointLength will work. Use this.
plotOptions: {
column: {
minPointLength: 3
}
}
You can do this quite simply with the minPointLength option. It sets the minimum number of pixels per column, default is 0, so zero values don't show up. It's in the docs here.
Try this JSFiddle
Here is a way to do it - although I think just having the column be zero-valued and not visible is the best way.
Find a very very low number that none of your data points would ever have but still keep it >0. Let us say it is .005. When you bring in your data any value that is 0 assign it this .005 value. In your tooltip formatter do an IF on the value. If it is .005 then make it 0. This way you get to see the "zero" column but the tooltip displayed will be 0 as well. If you are doing any kind of calculation on the stacked columns then you need to account for this non-0 0 value in there as well.
Not sure what you are trying to display, but maybe you could try to show the datalabels like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'gray'
}
}
}
Attempt at demo
I have a very simple example using Highcharts which uses "datetime" on one axis and categories on the other. It renders with no points and does not show the categories labels at all. I'm wondering now if you can't use that combination of types. Here is the code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['p1', 'p2']
},
series: [{
type: 'scatter',
data: [
{
name: 'Deliv1',
x: Date.UTC(2011,0,1),
y: 'p1'
},
{
name: 'Deliv2',
x: Date.UTC(2012,0,1),
y: 'p2'
}
]
}]
});
The answer to my problem was given on the highcharts forum. I thought I'd report back here what the solution was. I was errantly using y: 'p1' and y: 'p2' for values on the points. The y values actually are the indexes of the categories. Here is the updated code which works:
data: [
{
name: 'Deliv1',
x: Date.UTC(2011,0,1),
y: 0
},
{
name: 'Deliv2',
x: Date.UTC(2012,0,1),
y: 1
}
]
It's possible but you'll need to pretend the y values are numeric.
Probably by having an array with the actual Y-value and a number (maybe index) then the point's y value to the number and for the y-axis settings add the label's formatter to return the actual y-value based on the value.
You'll also need to adjust the min, max, interval and if you're using tooltips add a similar formatter to get the y-value.
(If I get more time, I'll try to create an example).