I have a highcharts column chart(http://www.highcharts.com/docs/chart-and-series-types/column-chart) with almost morethan 13000 categories on x-axis i.e. i am using datehour axis and i have a bar at specific datehour. Let say i have to take pdf containing all the data, Is it possible? If so can i put extremes max value to 13000.
What is the max value that Highcharts support in case of SetExtremes, Source width and SourceHeight?
I can not fine these values on Highcharts website.
Thanks.
Related
I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
I'm building a Pareto chart to show percent and count by category. It is important to be able to see all category labels on the chart. There is currently plenty of space to show more category labels, but the axis isn't showing them.
Is there a way to tell the axis to show all labels, or to reduce the padding/margin on axis labels so that more can be shown?
I am using Typescript in an Angular app.
Current Axis Creation Code:
let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis .title.text = 'Category';
categoryAxis.dataFields.category = categoryField;
categoryAxis.renderer.fontSize = 12;
Image of issue:
You need to set minGridDistance to a small enough value to make the chart display more/all labels, e.g.
categoryAxis.renderer.minGridDistance = 20;
From the documentation
Actual behavior depends on available space. But it's all governed by a single axis renderer's property: minGridDistance.
In human language it means this: "Whatever happens DO NOT place two grid lines closer than X pixels. I'm serious, man!".
Default settings depend on orientation. For example horizontal axis renderers (AxisRendererX) has a default of 120. Vertical axis renderer (AxisRendererY): 40.
Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.
I have a highchart that looks like this with the ordinal: false: As you can see the xAxis has some dates that have no data. So by setting ordinal:true on the xAxis I expect that dates without data are not shown. And this is what I get when I do that: Now the problems with this is:
dates on the xAxis are not shown
the data on the minimum and maximum points of the xAxis have only half of the column bar displayed (check image 2 left and right)
the tooltip does not show all the series'
When I add stockchart functionality, the navigator doesn't show the dates.
What I would like is:
A look similar to image 1 but with only dates that have data
Stock chart functionality on the chart.
I have a JSFiddle setup here
I'm using angular-chart.js (which uses Chart.js) to create a bar chart, there is also a table under this showing the same data.
The problem I am having is when I change the data being displayed, the Y axis labels change width and throw everything out of alignment, for example:
Chart and table aligned in the first picture, but when the data changes (max Y axis label 3 characters reduced from 4), it looks like the second picture.
I couldn't find anything in the chart.js docs, is there a way I can set a width for the Y axis labels globally?
Actually, I think I figured out a very basic and static way for setting the width.
In chart.js (version 1.0.2), line 1576:
this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) + 10 : 0;
I simply changed that to a static number, '93'.
this.yLabelWidth = 93;
I'm sure with a bit more tinkering I can call the width of the first cell in the table get them both to be the same.
I have a Gantt chart, and I need to make the duration scale to one day. Currently there's a label for every other day only.
See image below:
The axis chooses granularity and number of labels / grid lines based on available space, so that it does not look crammed.
You can influence it in a number of ways:
1) Set (reduce) minHorizontalGap for your value axis.
This setting defines how much free space there should be between labels. The less the number the more labels the chart will display.
OR
2) Disable autoGridCount and set gridCount manually.
With both approaches you might need to play around with the numbers to find the one that works for your chart setup and available space.