We are using Highcharts in our application using Angular JS. I want to set the formatting of amounts in a user culture specific formats which I am receiving from $locale service. After refering a link i got know that we can set values in below property for Highcharts:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
But while writing it in my code I am getting error that Highcharts is not defined, and also not working even if I set only lang property in the config object:
function extendBaseConfiguration(config) {
// these options are the default for all the charts. Pass in an object to override these values (or just change them once they're returned)
return $.extend(true, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
borderWidth: 0
},
plotOptions: {
column: {
grouping: false,
pointPadding: 0.2,
borderWidth: 0
}
},
lang: {
decimalPoint: $locale.NUMBER_FORMATS.DECIMAL_SEP,
thousandsSep: $locale.NUMBER_FORMATS.GROUP_SEP
},
tooltip: { pointFormat: '{series.name}: {point.y}'},
exporting: {enabled: true},
credits: {enabled: false}
}, config);
}
So how or where could I inject this Highcharts so that I can set it's value. Or is there any other technique by which i can make the amount user culture specific formatted.
Try to use a setOptions inside a controller, seems that options are applied.
Highcharts.setOptions({
lang: {
printChart: 'Aaaa',
thousandsSep: ','
}
});
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [1000, 1500, 1200, 8000, 7000]
}],
title: {
text: 'Hello'
},
loading: false
}
Example: http://jsfiddle.net/Hjdnw/1426/
Related
I have used BAR chart from ECharts and now I want to format its Y-Axis value to some other value.
Right now EChart generated my chart like above, But I want to display its Y-Axis value instead of 30,000 or 60,000 I want to display it as 30K, 60K, 80K.., and 150K.
I have tried with Formatter but it's not calling function runtime while EChart generating a chart to convert the value, Looks like this way we can just add Prefix/Suffix to the value
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: '{value} K'
}
},
I have also tried to give the function in formatter but I didn't find a way to pass the current value as a parameter in this function.
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: getFormattedValue(VALUE)
}
},
UPDATED: WITH NEW TRY, BUT STILL IT's NOT WORKING
When we use it like below on EChart official site then it's working
https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip
axisLabel: {
formatter: val => `${val / 1000}K`
}
Updated chart with correct format
But when I use it like below then it's not working, Even function is not getting called, the Value remain as it is
axisLabel: {
formatter: val => `${val / 1000}K`
}
Chart not getting updated
You are very close to the solution, actually...
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: val => `${val / 1000}K`
}
},
series: [
{
data: [30000, 60000, 90000, 120000, 150000],
type: 'line'
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
The formatter is documented here: Documentation - Apache ECharts
I'm using react-highcharts to draw a relatively simple column chart for some work data. The bosses wanted it set up so that hiding an item on the legend will adjust the scale, even if the element is in the middle of the chart. I followed this fiddle from the highcharts forum to make my data vanish and reappear. Great, everything works! But I have a bug I can't pin down in my code.
Whenever I remove and then return the rightmost visible element, the second-from-the-right element loses its data label.
I'm reasonably certain that the issue lies in my HighCharts options object. Here it is below:
const highChartsOptionsObject= {
chart: {
type: "column",
style: {
fontFamily: "helvetica",
},
height: 300,
},
title: {
text: null,
},
xAxis: {
allowDecimals: true,
type: "category",
crosshair: true,
},
yAxis: {
min: 0,
title: {
text: getLabel(),
},
labels: {
formatter: getLabelString()
},
},
},
credits: {
enabled: false,
},
legend: {
enabled: true,
},
tooltip: {
formatter: function () {
return `
<b>${this.point.name}</b><br />
${
getTooltip();
}
`;
},
},
plotOptions: {
column: {
stacking: "normal",
pointPadding: 0.3,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: "none",
formatter: function () {
const labelString = "hard coded test";
return labelString;
},
},
},
series: {
cursor: "pointer",
events: {
legendItemClick: function () {
if (this.visible) {
this.setData([], false);
} else {
let elementData = getSeries()[this.index].data[0];
this.setData([{ ...elementData }], false);
}
},
},
},
},
series: getSeries(),
};
For reference, my other highcharts options are: immutable: true and allowChartUpdate: true
Happy to provide more information if someone thinks that something else is relevant, I just need to sanitize it somewhat to go on SO.
I did some googling, and I identified my issue finally. During transitions, the data labels on the columns overlap. If you have not set allowOverlap to true for data labels, then it will default to false. Since the transition causes overlap, highcharts will set one of the datalabels to be invisible/not show up.
This can be fixed easily enough by just setting:
dataLabels:{
allowOverlap: true
}
I created document with highcharts scatter graph
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
title: {
enabled: true,
text: 'Date of entry'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Values'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Dana {point.x} = {point.y}'
}
}
},
series: [{
name: 'Values',
color: 'rgba(223, 83, 83, .5)',
data: [[167.6, 64.5], [167.6, 72.3], [167.6, 61.4]]
}]
});
and this works. This code is from documentation page. I get normal scatter data like on this page Highcharts scatter jsfiddle
Now, I created another PHP file that produces me with data I actually need. it is in document highcharts.php and result is this
[07.03.2017,21000],[07.03.2017,25000],[07.03.2017,33000],[07.03.2017,27000],[07.03.2017,30000],[01.01.2017,700],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],
how to connect data to this highcharts.php file? I found some examples but I cannot get it to work. So for start I need this, ONE line of data to show on scatter diagram. I lost few days and just do not get it what I am doing wrong.
If your PHP file returns the array presented above, you need to parse it a little bit in order to use it as data array in a scatter series. First of all, dates should be strings. Secondly, you need to use new Date() to create Date instance and use getTime() to return timestamps. Also, change xAxis type to datetime.
API Reference:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
Example:
http://jsfiddle.net/0025rsmt/
I am using HighCharts to visualize percentages from projects, which are downdrilled into variables which make the percentages!
I will give my code :
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
Example of the JSONs:
fraction.json
[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]},{"name":5,"id":5,"data":[["Total",""],["Estimated",0.44]]},{"name":6,"id":6,"data":[["Total",0.233905093],["Estimated",0.44]]}]
I would like the graph to show percentages above the column and on the yAxis when the graph is first loaded, but absolute values when the drilldown is activated. I didn't manage to get it until now. Could you help me?
There are two ways of doing those changes - a static and dynamic way. Static way - define data labels and tooltip options for drilldown series.
Dynamic way - apply the options on drilldown/drillup events.
events: {
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
}
}, false, false);
}
}
example: http://jsfiddle.net/d4fmaeea/
Two warnings:
In your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.
$.getJSON() is an asynchronous function. You use getJSON to assign list to options.series but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.
Async part of code:
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
I've finally got my step-chart showing some results, but now I want to style it to my needs.
My code is as follow:
$(function () {
$('#urvalResultIntervalDevelopmentGraf').highcharts('StockChart',{
title: {
text: 'Chart'
},
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
categories: ['2012-08-10', '2012-09-17', '2013-09-26', '2014-07-01', '2014-09-01', '2014-09-23'],
gridLineWidth:0
},
yAxis: {
title: {
text: 'Loss'
},
opposite: false,
gridLineWidth:0
},
tooltip: {
valueSuffix: ':-'
},
series: [
{name:'Gustafsson',step:true,data:[[1344549600,-119],[1347832800,-99],[1380146400,-48],[1404165600,-3],[1409522400,-74],[1411423200,-25]]},
],
});
});
How do I get my categories to show on the xAxis?
I'm guessing it cant match my dates (yyyy-mm-dd) to the ones in the data (timestamp), but I dont know how to handle it.
My jsfiddle is here:
http://jsfiddle.net/skorpion/akkxmke8/61/
You can't, like in docs: you can use categories or datetime xAxis. If you want specific format, then simply use xAxis.labels.formatter.