Related
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
I need to draw a chart with multi-level drilldowns. Because each level has different number of columns, I will update max of x-axis inside drilldown/drillup events. Then I noticed, some drilldown graph are messed up. The bar only draw the top parts. For example, y=3068. The graph only draws from 1500 to 3068.The bottom part is cut off.
$(function () {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function (e) {
this.xAxis[0].update({ max: 5 });
},
drilldown: function (e) {
this.xAxis[0].update({ min: 0 });
this.yAxis[0].update({ min: 0 });
if (e.seriesOptions.data.length > 14)
this.xAxis[0].update({ max: 15 });
else {
this.xAxis[0].update({ max: e.seriesOptions.data.length - 1 });
}
},
drillup: function (e) {
this.xAxis[0].update({ min: 0 });
this.yAxis[0].update({ min: 0 });
if (e.seriesOptions.data.length > 14)
this.xAxis[0].update({ max: 15 });
else {
this.xAxis[0].update({ max: e.seriesOptions.data.length - 1 });
}
}
}
},
title: {
text: 'Basic drilldown'
},
scrollbar: {
enabled: true
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Daily Data',
colorByPoint: true,
data: [{
name: '11/14/2016',
y: 5850,
drilldown: '11/14/2016'
}
]
}],
drilldown: {
series: [{
id: '11/14/2016',
data: [
{name: 'Customer Advocacy',
y: 8,
drilldown: 'Customer Advocacy0'},
{name: 'General Information',
y: 3068,
drilldown: 'General Information0'},
{name: 'Surcharge',
y: 98,
drilldown: 'Surcharge0'},
{name: 'Suspension And Restoration',
y: 2676,
drilldown: 'Suspension And Restoration0'}
]
}, {
id: 'Customer Advocacy0',
data: [
['Belinda Arduini',2],
['Deann Avery',2],
['Michele Rahilly',3],
['Tonia Lacey',1]
]
}, {
id: 'General Information0',
data: [
['Alicia Richardson',44],
['Angela Gash',86],
['Angela Migliaccio',125],
['Ashonti Sweat',178],
['Ayesha Walker',119],
['Brandon Steen',76],
['Charesse Yarbrough',101],
['Denise Davis',2],
['Dominicia Brown',65],
['Eldora Thompson',105],
['Essie Davis',2],
['Isa Martinez',17],
['Joanne Hendricks',102],
['Kenyell Kelley',149],
['Kiara Watkins',93],
['Kimberly Barlow',109],
['Lee Palma',30],
['Leslie Caceros',155],
['Lisa Fischer',184],
['Lisa Poliziana',139],
['Malisa Stanisclaus',116],
['Michael Carlisi',145],
['Miguel Rivera',85],
['Natacha Perez-Mendez',130],
['Patricia Bell',119],
['Sandra Buchanan',99],
['Sharae Donalson',140],
['Shawn Gribbin',120],
['Tara Damico',233]
]
},
{
id: 'Surcharge0',
name: '11/14/2016:Surcharge',
data: [
['Ernestine Bunche',17],
['Janice Avent',17],
['Sabrina Moses',20],
['Veronica Gibson',44]
]
},
{
id: 'Suspension And Restoration0',
name: '11/14/2016:Suspension And Restoration',
data: [
['Angel Deleon',95],
['Catherine Lynch',81],
['Colby Tobin',212],
['Coreena Contreras',158],
['Crystal Marshall',83],
['Dane Powell',144],
['Darrell Jones',98],
['Denise Campi',166],
['Denise Manners',32],
['Diane Koval',114],
['Eugenia Kostis',24],
['Jeanne Cheeseman',136],
['Jennifer Hiel',167],
['Jennifer Rodriguez',102],
['Lasonda Swinney',83],
['Latina Mason',53],
['Sherry Tartaglia',254],
['Susan Pasteur',43],
['Tomeka Ramocan',49],
['Tracey Green',155],
['Tracy Paulin',111],
['Tricia Palazzone',86],
['Ursula Covington',55],
['Virginia Dardis',175]
]
}]
}
});
});
I can't seem to figure out how to add an additional data point to the series data in Highcharts when running an area chart with line.
Here's the chart that I'd like to add an additional data point to:
http://jsfiddle.net/localman/uL8rwu6f/
$(function () {
var ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6]
],
averages = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23]
];
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
I can display the additional data in a single series, but not with the above for some reason http://jsfiddle.net/localman/dWDE6/859/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.myData + '</b>';
}
},
series: [{
name: 'Foo',
data: [{
y: 3,
myData: 'firstPoint'
}, {
y: 7,
myData: 'secondPoint'
}, {
y: 1,
myData: 'thirdPoint'
}]
}]
});
Any suggestions on how to combine these?
I have created a chart in jsfiddle which represents two values. id like the stacked bar chart to be adjusted so that it takes the whole width of the div. it should cover the background, like so.
http://jsfiddle.net/ftaran/jBHDM/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
background:'yellow'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
title: null,
labels: {
enabled: false
},
labels: {
enabled: false
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Fail',
color: 'red',
data: [5]
}, {
name: 'Success',
color: 'green',
data: [2]
}]
});
});
Try using this yAxis parameter:
yAxis: {
...
endOnTick: false,
...
},
Just complementing #wergeld's answer. If you still haven't gotten the result expected after applying his suggestion:
yAxis: {
max: totalOfSeriesData
}
Per example:
series: [
{
name: 'John',
data: [5],
color: 'red',
},
{
name: 'Jane',
data: [2],
},
{
name: 'Joe',
data: [3],
},
],
yAxis: {
max: 10, // 5 + 2 + 3 = 10
endOnTick: false,
}
I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link