I have a simple line chart using Forio Contour with two series. When I turn on the legend, it appears in the chart area as a box with correct info, but the box is rotated about -80 degrees -- totally tilted to the left.
I go through some steps below using the Contour data connectors with sample csv data because my real data will be imported in csv format. I'm not sure if this is related to the problem. Any ideas about why the legend is so askew?
Thank you, Carrie
<body>
<div style="text-align:left;">
<div id="companySalesGraph" class="companySalesGraph" style="width:700;height:300px;"></div>
</div>
</body>
<script>
var csvData1 = 'quarter,cost,revenue,profit\n2013Q1,100,150,50\n2013Q2,110,150,40\n2013Q3,90,180,90\n2013Q4,105,190,85';
var csv = new Contour.connectors.Csv(csvData1);
var data = csv.dimension('quarter').measure('revenue');
var data2 = csv.dimension('quarter').measure('profit');
var data3 = data.concat(data2);
var chart = new Contour({
el: '.companySalesGraph',
xAxis: { title: 'Quarter' },
yAxis: { title: '$K' }
})
.cartesian()
.line(data3)
.legend(data3)
.tooltip()
.render();
</script>
PS, I tried using these custom settings, which did relocate the legend, but it was still rotated
legend: {
vAlign: 'top',
hAlign: 'left'
}
Turns out a previously defined style in my project was being applied to the Contour legend, presumably because of duplicate class names. When I renamed my class, the problem went away.
Related
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/
I would like to be able to add a dot at the tip of a connector in a pie highchart. (using Highcharts 5.0.10)
I learned that there are <marker> svg elements (not to be confused with the highcharts marker api) and these can be added either:
via css
as an attribute on the <path> element.
Although I don't see a way to actually apply them.
I tried appending a marker element during the render event in highcharts and then modifying the connector element to add the attribute:
render: function() {
var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
'<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
'</marker>';
if (!$('#circle-marker').length) {
$('defs').append(marker);
}
$('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
}
Also tried creating a style that would point to that marker.
The more complex part of the issue is I want to make them dynamic (grab the color from the current point).
I might need to get my hands dirtier on SVG (I practically don't know a thing), but also think there is something I am missing from the Highcharts API.
EDIT: This is all done inside an AngularJS directive.
You can use Highcharts svg wrapper to create markers and attach them correctly on load event. The issue with the marker is - if you want them to have the same color as the connector,you need to create a separate marker for each - in SVG 1.1 markers do not inherit the color from the objects which refers to them (markers).
load: function () {
var renderer = this.renderer
this.series[0].points.forEach((point, i) => {
var marker = renderer.createElement('marker').add(renderer.defs).attr({
markerWidth: 10,
markerHeight: 10,
refX: 5,
refY: 5,
orient: 'auto',
id: `connector-marker-${i}`
})
renderer.circle(5, 5, 5).add(marker).attr({
fill: point.color
})
point.connector.attr({
'marker-start': `url(#connector-marker-${i})`
})
})
}
example: http://jsfiddle.net/39xvhwqo/
I need the xAxis label to have a tool tip. But when I use a formatter to add the tool tip , then long labels tend to overlap with the chart instead of pushing it to the right. Also this only happens if the label has a white space , if white spaces are removed then it work properly and pushes the chart to the right. This problem is shown in this fiddle: http://jsfiddle.net/W5wag/44
$(function(){
var chart1;
$(document).ready(function(){
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'],
labels: {
formatter: function() {
return '<span title="abc">' + this.value + '</span>';
},
useHTML: true,
style: {
whiteSpace: 'nowrap'
}
},
},
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
I tried to execute some code after the labels have been rendered, but my experience is a bit limited there. I'd try to find the maximum width of any of the x-axis labels, set that as the min-width of the parent (as below), and invalidate the labels to trigger a redraw. Maybe you can find a way to do that.
If all else fails, you could "cheat" with these quick-n-dirty solutions:
Set the text without spaces, and add them afterwards, when the layout is done.
window.setTimeout(()=>document.querySelector('span[title=abc]')
.innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500);
Or, add css to the page (which requires knowing how wide the labels will be, though):
.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }
In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/
Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
When you hover over points on the chart, you get a nice vertical line showing you which point you're currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.
If I click another point I'd want to remove any previous lines. Any ideas on how I could accomplish this?
The above solution like I said, is really cool, but is kind of a hack (getting the path of the crosshair) into the implementation details of highcharts, and may stop working in future releases, may not be totally cross browser (esp since <IE8 do not support SVG, the adding path may still work as it should be handled by highchart's add path method, but getting the crosshair's path may not work, I may be wrong, am an SVG noob). So here I give you the alternate solution of dynamically adding plotLines. PlotLines also allow some additional features like dashStyles, label etc.
get the axis and x value of point clicked (may not exactly overlap the crosshair)
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
Or
EDIT If you want to have the plotLine at the location of the crosshair and not the click position, you can use following formula (No direct API to get this, obtained from source code hence may stop working if code changes)
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
Add plotline
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
You can cleanup existing plotline
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
OR
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
Putting the pieces together
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
Add plot lines at click position # jsFiddle
Persist crosshair/cursor as plot lines on click # jsFiddle
You can do it in several ways
Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.
We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
Persist tooltip / crosshair on click # jsFiddle
Assuming you don't have much meta data to be shown along with the line, this is the easiest (or the coolest :) ) approach. You can also attach meta data if you want to using the renderer's text object etc.
An alternate way could be adding vertical plotLines to the xAxis
UPDATE
Refer my other solution to this question, that would work with zoom,scroll,etc