On my y axis I have value from 0 to n.
I need to display this number in this style:
2 (s)
1 (s)
I just want to add "(s)" but if I do this :
data: latency+"(s)"
It doesn't work.
Latency is the array where I have numbers.
Thanks.
Use the option
scaleLabel: "<%=value%> (s)",
if you want to change the display on the scale.
Or, if you want to change the display in the tooltip, set tooltipTemplate or multiTooltipTemplate depending on whether you have a single or multiple series.
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> (s)",
or
multiTooltipTemplate: "<%= value %> (s)",
You have to set the scaleLabel option like this :
scaleLabel : "<%=value%>(s)"
For example, you can set it in the global Chart options :
Chart.defaults.global = {
scaleLabel : "<%=value%>(s)"
};
You need to use the scaleLabel property.
Look at this:
Chart.js - Formatting Y axis
try :
scaleLabel: function (valuePayload) {
return valuePayload.value + '$';
}
Related
For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter
I want to get all the scale x labels and scale y labels and also the main x label and y label in zingchart . How to do it ?
The "Main label X" and "Main label Y" are referred to as scaleX.label and scaleY.label in zingchart. You will need to specify a text parameter for that object like so :
scaleY :{
label : {
text : "Main label y"
}
}
By default, each tick mark in ZingChart is predetermined based upon values. To change this, there are two ways to accomplish this :
Using the scale labels property which takes an array of string values. This will overwrite the text value at each corresponding index. Note that this will not modify the placement of each node value on the chart; it is simply a visual change.
Using the scale values property which takes an array of numeric values. This will modify the actual values of how the scales are placed. i.e. scaleX.values : [4,5,6,7] will set the starting scale at a numeric value of 4 and end at 7.
Example showing the properties noted above :
var myConfig = {
type: "bar",
plotarea : {
margin : "dynamic"
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
],
scaleY : {
label : {
text : "Scale Y"
},
values : [30,40,50]
},
scaleX : {
label : {
text : "Scale X"
},
labels : ["first", "second", "third"]
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
Is there any solution to replace Y column label "0" to "∞" (infinity) simbol?
Futhermore, I need "∞" insted of "0" in Highcharts tooltip.
Should I simply use formatter: function()?
Test example is here.
Thank you for assistance.
Like this?
yAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return this.value || '∞';
}
}
},
Is the second question mean: "∞" replace Y value "0" in Highcharts tooltip?
How to add a thousands separator to the Y Axis of Highcharts?
This is what I have:
yAxis: [{ // Primary yAxis
labels: {
In addition to what #jfrej suggested:
If you're directly formatting an axis, use {value} for both yAxis and xAxis:
Fiddle for yAxis format
Fiddle for xAxis format
If you're formatting a point in a tooltip, you may want to use {point.y} and/or {point.x}:
Fiddle for tooltip.pointFormat
Fiddle for tooltip.pointFormat with valueSuffix extension
If you're directly formatting the point label, you may want to use {x} and/or {y}:
Fiddle for plotOptions.series.dataLabels, formatting all points
Fiddle for series.data.dataLabels, formatting specific point
So, since you're formatting yAxis, {value} should work as expected:
yAxis: {
labels: {
format: '{value:,.0f} €'
}
}
If you find the above solution not working, try to add this:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Code to format with comma
var UNDEFINED;
Highcharts.chart(...
...
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, -1, UNDEFINED, ',');
}
}
}
How can I remove the labels and keep the Y axis?
I don't want remove the axis, only the labels. Basically the y axis without text or numbers
chart1.addAxis("y", {
labels: false,
vertical : true,
leftBottom : true,
});
can you try like this:
addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
labelFunc:function(){
return " ";
}
});
Pls. Dont remove the one single space inside the quotes.
or here is a post which shows how to delete an axis from the chart.
Hiding x Axis in dojox.charting