I need to know if it's possible to add some text (note/detail) on a specific point, in addition to the tooltip.
I use HighCharts Version 3.0.9.
Actually I use a click event on a points to show a popup detail in html . But i want to know if there is a native solution with HighCharts.
Like :
[
{
x: 11,
y: 11,
note: {
text: "Some text",
}
},
{
x: 16,
y: 17
}
]
Sure, it's possible. You have two options:
write your own tooltip.formatter, to get that value
use tooltip.pointFormat to create pattern for points
Second example (easier): http://jsfiddle.net/mPb4A/
tooltip: {
pointFormat: '{series.name}: <b>{point.y}: {point.options.note.text}</b><br/>'
},
Only limitation of second solution is that each point requires note property, otherwise you will get error in JS saying that Cannot read property 'text' of undefined.
Related
in my extjs I have a xtype label and am just trying to use cls to change font color but its not working. can you see what I am doing wrong?
layout: 'column',
items: [
{
columnWidth: 0.5,
xtype: 'label',
cls: 'myLabelCRM',
text: 'Account Data1'
},
--scss
.myLabelCRM .x-component-default {
color: red;
}
Try using userCls or componentCls instead of cls. These might be more direct to the component. It is not included in their documentation that you also need to add the generated component classes to your SCSS, but if you want to know what classes to add just inspect the element and get the classes from there.
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
While trying to use https://github.com/blacklabel/grouped_categories/ i managed to get it working with an output as shown below
Is there a way that the following options can be modified
1. Removing the grids (I could manually change the stroke-width of those elements in the html to 0 to remove the grids, Is there a property / any other way available to do this?)
2. spacing between the categories
3. shifting the entire category table, so that i can insert a custom axis above it?
As you can see in the Grouped Categories plug-in documentation, you can use the groupedOptions property to apply your styles :
xAxis: {
labels: {
groupedOptions: [{
style: {
color: 'red' // set red font for labels in 1st-Level
}
}, {
rotation: -45, // rotate labels for a 2nd-level
align: 'right'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: /* Your grouped categories */
}
You can therefore style almost everything you want of the xAxis.
EDIT
This will only allow you to modify the labels style. Sorry.
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I am working on a project utilizing highcharts and highstocks. I ran into 2 problems that I like to ask for your help on.
How do I code a highchart with a multiple series with each series getting its data source from a distinct Ajax call? The example on the Highcharts website only shows either a single Ajax source or a multiple series chart with pre-populated dummy data.
I am trying to separate the draw of highchart from the ajax call function, since the embedded callback method used to draw the chart can get a little hard to read. But when I factored out the highcharts drawing code from the call back section, the highchart display no longer works, ie the highcharts call does not return anything. For example:
this work:
$.getJSON(myUrl, function(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
this does not work, although syntax wise I don't see anything wrong.
$.getJSON(myUrl, function(data){
drawChart(data);
});
function drawChart(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
};
Thanks!
1) You need to get all series and push into one array, then in highcharts refer to it. What is important, chart should be initialised in the callback of last ajax.
When / then() jquery functions should be also helpful.
2) Syntax seems to be correct, please check your console (click F12 / developer tools) and observe if you get any errors.