i'm trying to show highchart legend in order like this
but im getting like this
please help me how to show in order like in first image
I assume what you want is the columns lined up. That just requires legend.alignColumns = true.
legend: {
alignColumns: true,
width: 500,
},
http://jsfiddle.net/blaird/1fu20j4g/7/
Highcharts has a great API reference. Here's everything you can do to a legend: Highcharts Legend API Reference
Related
Is there an option to set the font size for the labels given to each series line, which show up to the right in Google Charts? In the overview example (https://developers.google.com/chart/interactive/docs/gallery/linechart) the labels I'm referring to are "Dogs" and "Cats". My chart has a lot of series, and the labels are too numerous and get cut off at the bottom of the chart. I want to make them smaller so they fit.
use the following option...
legend.textStyle.fontSize
e.g.
legend: {
textStyle: {
fontSize: 8
}
}
I have been attempting to get a google chart to show each and every specified value labeled along the vAxis.
Currently, the most I can can get it to show is a label for every other tick. It seems like there should be a way to get around this.
Here's what I'm seeing:
I have the vAxis options set like this:
vAxis: {
ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21],
direction: -1,
minValue: 0,
maxValue:20,
showTextEvery:1
}
What I need is for it to label each and every row, meaning 1,2,3,4,5, etc... instead of just 1,3,5,9....
if the values are specified in the vAxis.ticks option and still do not appear,
then you will need to either increase the height of the chart and / or chart area...
height
chartArea.height
or decrease the font size...
vAxis.textStyle.fontSize
Using ECharts I am giving it a data series that consists of a number of data against really values. (e.g plotting stock prices).
I also have data zoom enabled.
My issue is that the generated X axis' labels overlap with the dataZoom. I can't understand from the documentation how to fix this.
You need to set the value of grid.bottom. This will move the whole grid further from the bottom of the canvas and pull the whole X Axis with it.
Example: grid: { bottom: 60 }
// usage
this._displayedChart.setOption({ grid: { bottom: 10 } })
Not a great solution but works.
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.bottom
I'm using Dojo for drawing my charts. I need to draw an overlay at certain points. Almost like a tooltip that’s always shows. It can be a stack of values or an icon that display above, below or next to the data-point.
Does anyone know how I can accomplish this?
Does anyone know how I can access the list of screen coordinates for each plotted data-point?
My theory is; if there is no way to draw a persistent and custom tooltip, to draw over the chart and position my custom object in relation to the point coordinate.
Another option would be to draw a custom marker. (Not like the normal SVG paths.)
Please don’t suggest another charting library. I need to know how to do this in Dojo.
Thanks in advance.
I am not sure if you already have found an answer to using custom markers. I am using the SVG path variable for plotting the custom marker.
For eg:
var custom_marker = "M150 0 L75 200 L225 200 Z" // a triangle
var data = [{x: 10, y: 20, marker: custom_marker}, {x: 15, y: 25, marker: custom_marker}] // and so on
Feed this data into dojo chart and you can plot the custom marker.
I'm fairly new to designing reports with iReport and I've run into a challenge that I haven't been able to resolve. I'm trying to graph timestamped data but have it shown as an area graph. I was successfully able to graph the data using the time series chart, however that format graphs the data as a line. I need an Area graph. Therefore I'm attempting to graph that same data using dates as categories. My problem is that the Area Graph draws every tick mark which results in a clutter look. I've searched on how to limit ticks but the solutions don't seem to address my problem (or the solution is above my knowledge of java :) ).
So, my question is either: How can I set a minimum tick on an Area graph? Or, how can I make a time series chart graph an area instead of a line?
Many Thanks!
If you havent already take a look at the JFreeChart demo here and review XYAreaChartDemo2.java, this example shows a TimeAxis and and AreaRenderer :
If you use the ChartFactory try using
JFreeChart chart = ChartFactory.createXYAreaChart(
"XY Area Chart Demo 2",
"Time", "Value",
dataset,
PlotOrientation.VERTICAL,
true, // legend
true, // tool tips
false // URLs
);