For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions
Related
I need the graph to display the values without rounding, the same as shown in the tooltip
In your chart options dataLabels use the formatter to define the display value, e.g.
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
}
Full example with demo chart taken from official docs and added custom label:
var options = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
},
tooltip: {
y: {
formatter: function(val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
I have created High chart to full fill my requirement as shown in attached Image and i have tried below code in fiddle
example code in fiddle is as follows
https://jsfiddle.net/vsLr07ak/
Below is my code
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'HISTORICAL NEWS SENTIMENT'
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
min: -100,
max: 100,
tickInterval: 10,
showLastdataLabel: true,
},
xAxis: {
categories: ['26. Nov', '24. Dec', '21. Jan', '18. Feb', '18. March']
},
credits: {
enabled: false
},
series: [{
name: null,
data: [15, 13, 14, 17, 12]
}, {
name: null,
data: [12, -12, -13, 21, 11]
}]
});
Html code is as
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js">.
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
but it display 2 bar for per month, I want it show as below attached image.
Can any one help me out?
and I want my chart as shown in image
Instead of category, you should use datetime xAxis type and define x values as timestamps:
series: [{
...,
data: [
[17227780000, 15],
[18523780000, 13],
[19819780000, 14],
[21115780000, 17],
[22411780000, 12],
[23707780000, 12],
[25003780000, -12],
[26299780000, -13],
[27595780000, 21],
[28891780000, 11]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/83us07cx/
or use pointStart and pointInterval properties:
series: [{
pointStart: 17227780000,
pointInterval: 1000 * 60 * 60 * 24 * 15, // 15 days
name: null,
color: 'red',
negativeColor: 'blue',
data: [15, 13, 14, 17, 12, 12, -12, -13, 21, 11]
}]
Live demo: https://jsfiddle.net/BlackLabel/sqtha8xm/
API Reference:
https://api.highcharts.com/highcharts/series.column.data
https://api.highcharts.com/highcharts/series.column.pointStart
https://api.highcharts.com/highcharts/series.column.pointInterval
https://api.highcharts.com/highcharts/series.column.negativeColor
I need to show tooltips for only the last two series when hovering the mouse over the graph. In this example the idea will be to show only the tool tips for the values 1699 and 1750. The rest of the values can't show any tooltips when hovering the mouse. How can I achive that? I haven't found any way to do so. Is it possible? Thanks in advance.
(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can use the formatter like this :
tooltip: {
formatter: function() {
if(this.points[0].key < (this.points[0].series.xData.length -2)){
return false;
}
var s = [];
s.push(this.x);
this.points.forEach(function(point) {
s.push('<b>' + point.series.name + '</b>: ' + point.y);
});
return s;
},
split: true
},
Fiddle
Not the cleanest code (there still an error in the console) but it's work.
Edit
Following Deep 3015 comment, code and fiddle updated
You can wrap tooltip.prototype.renderSplit method to show the tooltip only if the points have certain x values.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
if (!this.options.showOnLastTwo) {
return p.call(this, labels, points)
}
const point = points[0]
if (point) {
const allowedXs = point.series.xData.slice(-2)
if (allowedXs.includes(point.x)) {
return p.call(this, labels, points)
}
}
this.destroy()
})
And set in tooltip options showOnLastTwo flag to true:
tooltip: {
split: true,
showOnLastTwo: true
},
The flag is not necessary but the wrap changes Highcharts globally so it will affect every chart - the flag will prevent this.
live example: http://jsfiddle.net/sLvekuht/1/
I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.
I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.
Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).
http://jsfiddle.net/aoouym2o/
I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color
Again, here's the original code without me trying to change any color:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
What am I missing?
You did it exactly right, you were just missing a comma before your added color setting ;)
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#FF0000'
},
Here is a link to a modified fiddle. (updated link to the working version)
You can set color for the chart by specifying it in each series object:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#0000FF'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#FF0000'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#00FF00'
}]
Just change color setting :P
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color : '#f7a35c'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#7cb5ec'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#90ed7d'
}]
and if you want to change the color of the number > 0 watch
http://www.highcharts.com/docs/chart-concepts/series
Add option:
plotOptions: {
series: {
lineColor: '#303030'
}
},
my data is something like below.
i want to show them in one single chart in highcharts.
category [jack jane julie john]
i have 3 series of grades like this:
homework [2 1 2 3]
midterm [5 4 6 6]
final exam[10 9 11 10]
i want them to be stacked.
and their ages:
ages [18 22 17 24]
my problem is i know how to stack and know how to plot columns but not they together.
You can set different stacking groups:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['jack', 'jane', 'julie', 'john']
},
yAxis: [{
title: {
text: 'Grades'
}
}, {
title: {
text: 'Age'
},
opposite: true
}],
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
// first stack
{
data: [2, 1, 2, 3],
stack: 0,
yAxis: 0
}, {
data: [5, 4, 6, 6],
stack: 0,
yAxis: 0
}, {
data: [10, 9, 11, 10],
stack: 0,
yAxis: 0
},
// second stack
{
data: [18, 22, 17, 24],
stack: 1,
yAxis: 1
}]
});
});
http://jsfiddle.net/bhSrh/