I have created a Chart JS 2 graph that have two datasets.
When I hover over a line I get only the current line's data but I want to see the other line's data too.
How can I add all the data from the specific date in the tooltip?
To add all the data from a specific label (date) in the tooltip, you need to set tooltips mode to index in your chart options, like so :
options: {
tooltips: {
mode: 'index'
},
...
}
ᴅᴇᴍᴏ
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE 1',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}, {
label: 'LINE 2',
data: [4, 2, 3, 5, 1],
backgroundColor: 'rgba(0, 119, 290, 0.1)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
for chart.js version 3.x use tooltip:
options: {
tooltip: {
mode: 'index'
},
...
}
Related
I have two series each with its color and I want to be able to define a different color for both series in a specific column.
How can I display the first 3 columns in grey? https://jsfiddle.net/Kagebi/omcqrzsu/
Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
grouping: false
}
},
tooltip: {
shared: true // true breaks series highliting on hover
},
xAxis: {
categories: ['24-02', '25-02', '26-02', '27-02', '28-02', '29-02', '01-03', '02-03', '03-03', '04-03', '05-03']
},
series: [
{
name: 'Expected',
data: [180, 140, 180, 140, 180, 140, 180, 140, 180, 140, 180],
color: '#b2dbff',
},
{
name: 'Current',
data: [99, 197, 165, 80, 144, 80, 144, 80, 144, 80, 144],
color: '#1d94fa'}
],
events:{
load: function() {
var point = this.series[0].points[1];
point.update({
color: 'black'
});
}
},
}
)
You can specify the color of each entry in a serie like that:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
See the documentation here : https://www.highcharts.com/docs/chart-concepts/series (point n°3).
I've updated your jsfiddle here with the first three columns in grey: https://jsfiddle.net/0mhnck5L/
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I am trying to plot multiple column graphs on the same chart, stacked on each other. This is an example of desired output.
Each colored column segment represents percent of team to have reached a given level by the end of the given month. So it's like 4 separate column charts stacked. I think this is different than grouped and stacked, but may be mistaken.
Thanks for any feedback.
This can be done with a combination of stacked and column range. There are a few caveats with this in that you have to have a category for your yAxis which causes some funkiness with how you set your series' data values. I opted for one method and I am sure there are others. What I did was first set the chart type to 'columnrange':
chart: {
type: 'columnrange'
},
Then I set up the yAxis properties to use categories:
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
Since the offset of the category is in-between the tick marks of the axis I removed them and set the start position to not be on the tick:
startOnTick: false,
min: .5,
gridLineWidth: 0,
Up next I have to set the format of the labels (essentially just hiding the first label):
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
Now I create plotLines to mimic the gridlines with the last one a different color to denote the "Target":
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
Now I setup the plotOptions for this chart. Note that the stacking parameter is not listed in the API as being part of the columnrange type but it still functions (as of this answer using v5.0):
plotOptions: {
columnrange: {
stacking: true
}
},
Okay, almost there. I then set up the series data:
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
The important part of the data values is that each "level" is a whole integer such that Level 1 is from 0 to 1 and Level 2 is from 1 to 2 and Level 3 is from 2 to 3. This works out good as you try to determine your percentage in each level for each month as they are still in uniform increments.
I did not modify the tooltip as you gave no specs on that.
Sample jsFiddle and full code:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
startOnTick: false,
min: .5,
gridLineWidth: 0,
title: {
text: null
},
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
},
plotOptions: {
columnrange: {
stacking: true
}
},
legend: {
enabled: true
},
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
});
});
I need to start the scrollbar at the left instead of the right for my Highstock graph. Any suggestions? I've seen the setExtremes options but I'm either not using it right or it doesn't do what I need. Here is the code for the graph I have so far.
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Placed By Advisor'
},
xAxis: {
categories: ['John Jenkins', 'Steve Smith', 'Will Douglas', 'Dustin Johnson', 'Suzy Abbott', 'Wendy Jones'],
min: 2
},
yAxis: {
min: 0
},
legend: {
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
series: [{
name: 'Unemployed',
data: [100, 100, 120, 55, 35, 189]},
{
name: 'Placed In Related',
data: [80, 108, 15, 74, 48, 88]},
{
name: 'Placed In Unrelated',
data: [17, 22, 187, 70, 75, 35]},
{
name: 'Except',
data: [10, 0, 19, 65, 25, 174]}],
scrollbar: {
enabled:true,
barBackgroundColor: 'lightgray',
//barBorderRadius: 7,
//barBorderWidth: 0,
//buttonBackgroundColor: 'gray',
//buttonBorderWidth: 0,
//buttonArrowColor: 'yellow',
//buttonBorderRadius: 0,
//rifleColor: 'yellow',
//trackBackgroundColor: 'red',
//trackBorderWidth: 1,
//trackBorderColor: 'silver',
//trackBorderRadius: 7
}
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(
);
});
});
Here is a fiddle of what I have so far.
You need to set min value as 0 and max as any (like 2).
http://jsfiddle.net/yHGS9/5/
I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});