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).
Related
I have a pie chart which, potentially, will have empty categories when the page loads as data is dynamic from an SQL database.
I've set up the formatter so that no label is shown if the value is 0, but how does one prevent the leader lines from showing?
I would prefer to avoid the solution of not including the category at all, as it is important to still show it as a possibility in the key
You can filter the data array to plot only values greater than zero:
series: [{
type: 'pie',
data: [0, 0, 5, 0, 20, 0, 15].filter(function(y) {
return y > 0
})
}]
Live demo: http://jsfiddle.net/BlackLabel/g98uaoy0/
Or set the right condition in the formatter function:
series: [{
...,
dataLabels: {
formatter: function() {
if (this.y) {
return this.y
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/mft83dgb/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter
I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});
I have two lines of date data. One line plots a point sequentially every day. The other line plots non-sequental points that fall on one of the days of the previous line.
The problem is that the crosshair functionality behaves weirdly when I do this. See the example linked below. You will notice that although the tooltip and point highlighting shows for the proper point, the crosshair gets stuck on the non-sequential point along the x-axis, even though this is not the current position of my mouse on the chart. The exception to this is when you hover your mouse directly across the line. The crosshair follows the mouse properly then.
See example here: http://jsfiddle.net/2H9m3/1/
$(function () {
$('#container').highcharts({
tooltip: {
shared: true,
crosshairs: true
},
xAxis: {
type: "datetime", maxPadding: 0, minPadding: 0
},
yAxis: {
min: 0
},
series: [{
name: 'Line',
data: GenerateData(10, 50)
}, {
name: "Events",
color: "#EF4B68",
lineWidth: 0,
marker: {
enabled: true,
symbol: "triangle",
radius: 6
},
data: [
[5 * 86400000, 0],
[21 * 86400000, 0]
]
}]
});
});
function GenerateData(min, max) {
var data = [];
for (i = 0; i < (30 * 86400000); i = i + 86400000) {
data.push([i, GetRandomInt(min, max)]);
}
return data;
}
function GetRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
I am not sure if this is a bug or something that I am doing wrong.
The issue here is subtle. It is actually caused by the fact that the tooltip is linked over the top-most series. Since you are creating your linear series first then your non-sequential series the top-most series is the 2 points. So, in order to recapture the 'tooltip` and your crosshair you have to hover closer to the series that is behind the non-sequential series.
Fixes:
Make the non-sequential series the first one you add.
Give an index value to whichever series you want on top that is larger than the least-full series.
I went with option 2:
series: [{
name: 'Line',
index: 1,
data: GenerateData(10, 50)
}, {
name: "Events",
index: 0,
color: "#EF4B68",
lineWidth: 0,
marker: {
enabled: true,
symbol: "triangle",
radius: 6
},
data: [
[5 * 86400000, 0],
[21 * 86400000, 0]
]
}]
Example here.
Looks like a bug in new crosshairs core.
Reported to devs: https://github.com/highslide-software/highcharts.com/issues/2816
Thanks!
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/
I'm relatively new to HighCharts, and I would like to have two Y-axes where the data is always expressed in terms of the left-hand (primary) Y-Axis, but there is a constant function whereby you can translate the data into the terms on the right-hand (secondary) Y-Axes.
Take, for example, http://jsfiddle.net/M2EVb/
It's a constant well-known function to translate from Fahrenheit to Celsius. Even though I have specified the Primary Y-Axis as ranging from 32 to 212 with a tick interval of 18, and the Secondary Y-Axis as ranging from 0 to 100 with a tick interval of 10, the two axes don't line up properly; likely due to the "cels" data. But the point is that I would like to have the "cels" data just be another set of Fahrenheit temps, and have the right-hand Y-Axis values be the proper Celsius "translations" of their respective Fahrenheit values, and always show up.
Use the label's formatter function in the yAxis configuration to convert your yAxis ticks from F to C like this:
yAxis: [{
title: {
text: 'Temperature (C)'
},
labels: {
formatter: function() {
return YourConversionFunction(this.value) +' C';
}
}
}]
Make sure you are defining your Series using the same dataset (the F data):
series: [{
type: 'area',
name: 'Temp (F)',
data: Far_TempData,
yAxis: 0,
xAxis: 0
}, {
type: 'area',
name: 'Temp (C)',
data: Far_TempData,
yAxis: 1,
xAxis: 0,
lineWidth:0,
fillOpacity: 0.01,
visible:true
}]