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.
Related
I want to create a stack graph something like this:
Note: Each stack has different value
Is it possible with chart js ? If yes what my data should look like ?
I have tried this:
var data = {
labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
datasets: [
{
label: "Harpo",
fillColor: "blue",
data: [] // What should i use here
},
{
label: "Chico",
fillColor: "red",
data: [] // What should i use here
}
]
};
But this is not what i want.
Any help would be appreciated.
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
I am new to High Charts for drawing charts. My requirement is to draw a small vertical line on top of already drawn chart by specifying end coordinates. I can easily draw one using the JqPlot plugin and the image is given below.
The options I have used in JqPlot is
canvasOverlay: {
show: true,
objects: [
{line: {
name: 'stack-overflow',
lineWidth: 6,
start: [8, 0.5],
stop:[8, 0.7],
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
On some research I have found that I can use plotLines in High charts
Stackoverflow Post
I have tried this option but it draws a full length red vertical line and I don't see any option to restrict the length of the line.
The code I have used is given below
xAxis: {
min: 0,
max: 35,
tickInterval: 5,
title: {text: "Time"},
plotLines: [{
color: 'red',
width: 5,
value: 5.5
}]
}
UPDATE:
JSFiddle link is given below
JSFIddle
Am I missing something or do I need to try some other options
You could use the Highcharts renderer option
function (chart) {
var lineStartXposition2 = lineStartXposition + chart.plotLeft + 10,
lineStartYposition2 = lineStartYposition + chart.plotTop + 10,
lineEndXposition2 = lineEndXposition + chart.plotLeft + 10,
lineEndYposition2 = lineEndYposition + chart.plotTop + 10;
chart.renderer.path(['M', positionX, positionY, 'L', positionX, positionEnd])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
});
Update 3 : New fiddle using point coordinates and variables
Fiddle
I hope the following link will help you
chart.addSeries({
name: 'Line Marker Values',
type:'scatter',
marker: {
symbol:'hline',
lineWidth:2,
lineColor:'rgba(253,0,154,0.9)',
radius:12
},
data: [32,35,37,28,42,35,27]
});
click here
You can use appropriately configured scatter series for this.
var chart = Highcharts.chart('container', {
series: [{
data: [1, 3, 4, 5, 1]
}, {
tooltip: {
pointFormat: null // don't dispaly tooltip
},
states: {
hover: {
enabled: false
}
},
type: 'scatter', // points don't need to be sorted
lineWidth: 3,
marker: {
enabled: false
},
showInLegend: false,
data: [
[2, 3], [2, 5]
]
}]
});
Live demo: http://jsfiddle.net/kkulig/gab2ow7f/
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>
There's too much padding on either side of the area chart and minPadding/maxPadding doesn't work with categories.
I want the area chart to start and end without any padding.
My code is below:
http://jsfiddle.net/nx4xeb4k/1/
$('#container').highcharts({
chart: {
type: 'area',
inverted: false
},
title: {
text: 'Too Much Padding On Either Side'
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Data Point'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b> points'
},
series: [{
name: 'Visits',
data: [
["Monday", 58],
["Tuesday", 65],
["Wednesday", 55],
["Thursday", 44],
["Friday", 56],
["Saturday", 65],
["Sunday", 69]
],
dataLabels: {
enabled: false,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}',
y: 10,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
A colleague of mine solved this very situation for some of my charts. Their solution was to remove the type: 'category' from the x-axis (making it a linear type instead) and instead replace the axis labels from an array.
Here's what's been changed:
First, I added an array of your x-axis labels.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday","Sunday"];
Next, I updated your series values to hold only the y-axis values.
series: [{
name: 'Visits',
data: [58, 65, 55, 44, 56, 65, 69],
Then, for your x-axis, I included a formatter function to pull in the labels from the array as substitutes for the default linear values.
xAxis: {
labels: {
formatter: function(){
return categoryLabels[this.value];
}
}
},
Lastly, I updated the tooltip options to show the values from the labels array.
tooltip: {
formatter: function () {
return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0);
}
},
I updated your fiddle with this tweaks: http://jsfiddle.net/brightmatrix/nx4xeb4k/4/
I hope you'll find this solution as useful as I have!
According to API, the default value of highcharts.xAxis.tickmarkPlacement is between and this is why the point of each category drops between two ticks on xAxis in your chart.
By setting highcharts.xAxis.tickmarkPlacement to on and playing around the value of highcharts.xAxis.min and highcharts.xAxis.max like this, you should be able to achieve what you want.
You can declare the min / max values to fix the problem.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
//....
xAxis: {
min: 0.49,
max: categoryLabels.length - 1.49,
categories: categoryLabels,
type: 'category'
},
Example:
http://jsfiddle.net/fo04m7k7/
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.