HighCharts how to make a responsive legend? - javascript

I am making a HighCharts pie chart with a responsive legend, the legend should work on mobile views as well as tablet, pc, etc.
Here is sort of a link to my issue on js fiddle https://jsfiddle.net/sg657bpz/1/
And here are the styles
legend: {
align: 'center',
layout: 'horizontal',
width: 600,
x: 100,
itemMarginTop: 1,
itemDistance: 10,
itemWidth: 170,
},
Basically right now, the legend will just kind of cut the words out of the label when we go to mobile view..
I would like the legend to dynamically shrink in size kind of like how flexbox does, depending on how large your viewport is, so that It fits within the chart and keeps the same structure of having 3 columns and two rows.
How can I add this responsive functionality? In the responsive attribute, it only lets me set one value of either min width or max width, so I cannot do CSS like media queries. Also to create this two row funcitonality, I have to set the width to different numbers, and just kind've guess that It will go on two rows, is there a way to implement this feature easier?
Thank you for the help

Related

responsive highcharts with dynamic font size and widths

Im trying to make my Pie Chart fully responsive so it can be viewed on smaller devices. Im using the latest Highcharts version (Version 5) to draw the charts.
I have used the below code to give the chart a maximum and minimum width so the chart doest expand or shrink too too much
JS Code
responsive: {
rules: [{
condition: {
maxWidth: 500,
minWidth: 100
},
chartOptions: {
legend: {
enabled: true
}
}
}]
},
But unfortunately this doesnt seems to be working. The max and minimum width is not being applied to the chart.
Also how can i set the font size in the legend and chart (both percentage and the center text) dynamically (smaller) when its viewed on small screens. Now the font size remains the same on smaller screens which takes up lots of space and breaks the chart
I have setuped a demo over here https://jsfiddle.net/livewirerules/6wu282fu/11/
Any help will be appreciated
I answer this for upcoming referee
as of Highcharts 5, you have an ability to change font size with a dynamic value with em numbers eg: 1em
you can see it in action here :
[http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/em/][1]

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

Hide some graphic elements, c3js, without unloading data

Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data?
I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars.
I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip.
My question is not discussed in the documentation it seems.
A similar issue in November was not solved.
I don't have any code right now - just looking for an alternative to making a custom tooltip.
Thanks
One easy solution is to use CSS display property for the chart svg elements like:-
http://jsfiddle.net/chetanbh/j9vx0dmg/
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300],
]
}
});
In the above c3js chart example a line chart is rendered with two lines.
Each line is a Path svg element under a Group element. These group elements will get class attribute values like 'c3-target-data1' and 'c3-target-data2'.
Taking advantage of this we can use CSS like:-
.c3-target-data2 {
display: none;
}
to hide the entire 'data2' in the chart, but tooltip will continue to show the data for 'data2'.
Hope this helps.

Overlapping bars with JQPlot

I am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: false,
fillToZero: true,
barPadding: -5, // number of pixels between adjacent bars in the same group (same category or bin).
barDirection: 'vertical', // vertical or horizontal.
barWidth: 20, // width of the bars. null to calculate automatically.
shadowOffset: 0 // offset from the bar edge to stroke the shadow.
},
},
This indeed makes the bars overlapping but the second bar overlaps the first one.
I would like it vice versa.
Is this possible with JQPlot or does anyone know another library with this possibility?
There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.
$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);
Demo

Formatting legend and axis in Google Charts

I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt

Categories

Resources