There seems to be an issue with displaying stacked charts with multiple series, where the series don't have the same number of points.
JSFiddle: http://jsfiddle.net/k68pwbm7/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
tooltip: {
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [500, 30, 400, 70, 2,500, 30, 400, 70, 2]
}, {
name: 'Jane',
data: [200, 2000, 30, 200, 1,200, 2000, 30, 200]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Look at point at X=6 (tall column), if you mouse over the column at Y<500, a tooltip shows up for X=4, which is the last point for the "Joe" series. Then if you mouse over the same column at y>500 the correct tooltip shows up with just the two series for that column.
Is this a known issue? Any way to fix this?
Upgrading to Highcharts 4.1.10 fixed the issue for me.
Related
I am using Highchart , I am new for it , I need to show line chart when i have a selected date array and every date have multiple value.
For Example I have
date=[2022-01-02,2022-01-07,2022-01-10]
and
Data=[[1,2,3],[3,5,4],[6,3,4]]
I have some references but for column and single data : https://jsfiddle.net/50e1nbac/4/
enter image description here
In above picture I just need to mentioned date from list on X-axis.
For showing observation scatter series will be fit to visualize it how many times the action has occurred. You can insert the dates as categories, the points will refer to them.
var dates = ["2019-06-14 17:00:00", "2019-06-14 17:01:00", "2021-04-13 06:15:00"];
Highcharts.chart('container', {
title: {
text: 'Scatter plot with regression line'
},
xAxis: {
type: 'datetime',
categories: dates
},
yAxis: {
min: 0
},
series: [{
type: 'line',
name: 'Regression Line',
data: [
[0, 1.11],
[5, 4.51]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
marker: {
radius: 4
}
}]
});
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Demo: https://jsfiddle.net/BlackLabel/9r07asom/
https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
https://api.highcharts.com/highcharts/xAxis.categories
i am trying to put labels on x-axis for the charts mentioned below.
even the labels that i want to display are taken from the database and displayed. for each value of y-axis there is a repective x-axis. so i want like when i hover on the point x-axis value : y-axis value. it should appear like this.
If anyone had tried this earlier, please help.
Highcharts.stockChart('container', {
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
Use tooltip's formatter (Highcharts API here)
tooltip: {
formatter: function() {return this.x+" : "+this.y}
}
Assuming you have the names you want to give to the x-Axis in an array, this code should work:
Javascript:
var namesArray = ["Name1", "Name2", "Name3", "Name4"]
Highcharts.stockChart('container', {
tooltip: {
formatter: function () {
var s = '';
$.each(this.points, function () {
s += namesArray[this.series.data.indexOf(this.point)] +" : "+this.y;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [3, 5, 6, 7]
}]
});
Please notice I added namesArray as an example here.
What the tooltip function does is the following:
it declares a String
it loops through all of your Highstock points
for each point, it gets the index of the point in series.data and gets the same index from namesArray. This should achieve the thing you need.
I would like to create a chart similar to the following it ChartJS. It's 2 line charts but with the space between the two lines filled in.
The X axis will be the time of each sample, the y axis the min & max temperature recorded at that time.
The area between the min/max is the only bit that needs to be filled in, outside the min/max lines should remain unfilled.
Is this possible with ChartJS?
Thanks
Shawty
Did you know abut hicgcharts
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Temp'
},
xAxis: {
categories: ['1pm', '2pm', '3pm', '4pm', '5pm']
},
credits: {
enabled: false
},
colors: [ '#910000', '#00FFFF'],
series: [{
name: 'Max Temp',
data: [5, 3, 4, 7, 2]
}, {
name: 'Min Temp',
data: [2, 2, 3, 2, 1]
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Taken from another answer but closer to what you wanted. (color only in middle).
So basically, in ChartJS you need to overlay 2 filled line charts, and make the bottom one white. (sadly it overwrites the gridlines)
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Temp'
},
xAxis: {
categories: ['1pm', '2pm', '3pm', '4pm', '5pm']
},
credits: {
enabled: false
},
colors: [ '#910000', '#FFFFFF'],
series: [{
name: 'Max Temp',
data: [5, 3, 4, 7, 2]
}, {
name: 'Min Temp',
data: [2, 2, 3, 2, 1]
}]
});
});
.highcharts-series-1 path{fill-opacity:1!important}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I have a stacked bar chart that with multiple series and categories.
When showing/hiding the series, I want the categories having no data to hide.
This works fine when it is the first or last category, but the middle category doesn't disappear.
In the following snippet, when hiding the A series (by clicking in the legend) the category 1 disappears. But when I hide, B and C, the 2 category doesn't disappear. What I want is that the middle categories to disappear too (no more white space in the middle).
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: [1, 2, 3]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [{ x: 0, y: 5 }]
}, {
name: 'B',
data: [{ x: 1, y: 4 }]
}, {
name: 'C',
data: [{ x: 1, y: 4 }]
}, {
name: 'D',
data: [{ x: 2, y: 2 }]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 200px; max-width: 800px; height: 250px; margin: 0 auto"></div>
I already tried:
passing the data as an array,
not specifying the category array, because I don't really want to show the category, but I don't want the space to be kept when there is no data
play around with stacking
I know this could be achieved programmatically, that's no problem. But, what I would like to know is:
is this a bug/feature?
is there a Highcharts option that I missed?
do you have any different suggestions of how can I achieve something similar to this?
Thanks!
I've been asked to do this kind of graph (40,9% and 16,4% are examples, they should indicate something like -6% and 9%):
Any idea on how I can get that kind of result, using a javascript library, if possible (but it is not a must) Highcharts?
Thanks
It's possible with HighCharts, Documentation
e.g.
$(function () {
data = [{
valSecond: 25,
valFirst: 62.5
}];
// Build the data arrays
var secondData = [];
var firstData = [];
for (var i = 0; i < data.length; i++) {
// add second data
secondData.push({
name: "Second",
y: data[i].valSecond,
color: "#00FF00"
});
// add first data
firstData.push({
name: "First",
y: data[i].valFirst,
color:'#FF0000'
});
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
animation: false,
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'second',
data: secondData,
size: '30%',
startAngle: 270,
endAngle: 360,
innerSize: '20%'
}, {
name: 'first',
color:'#FFFFFF',
data: firstData,
size: '80%',
startAngle: 0,
endAngle: 225,
innerSize: '60%',
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
Jsfiddle
In the highcharts you can adapt donut chart http://www.highcharts.com/demo/pie-donut, remove connectors, set useHTML for dataLabels and rotate by css / rotation SVG element. Missing elements can by added by renderer.