score:1
As Halvor Strand noted in his comment, one possible way to solve this question would be to have each of the chart points be a different distance from the center of the graph.
I chose to create a "dummy" line series to serve as the "lopsided" chart points, while making the real grid behind the lines invisible.
Here's the code for the "dummy" series:
{
name: 'dummy series for category max/mins',
dataLabels: {
allowOverlap: true,
enabled: true,
formatter:function() {
return this.point.name;
},
style:{color:"black"}
},
data: [
{ y: 90000, name: 'Sales', dataLabels: { align: 'center', y: -5 } },
{ y: 70000, name: 'Marketing', dataLabels: { align: 'left', x: 10, y: 15 } },
{ y: 85000, name: 'Development', dataLabels: { align: 'left', x: 10, y: 15 } },
{ y: 80000, name: 'Customer Support', dataLabels: { align: 'center', y: 30 } },
{ y: 95000, name: 'Information<br />Technology', dataLabels: { align: 'right', x: -10, y: 15 } },
{ y: 100000, name: 'Administration', dataLabels: { align: 'right', x: -10, y: 15 } }
],
pointPlacement: 'on',
showInLegend: false,
enableMouseTracking: false,
lineWidth: 2,
lineColor: 'red',
marker: { enabled: false }
}
What I did here is manually set the "max" values for each of the chart points and give them a name to match what would normally be shown in the x-axis categories.
The dataLabels
attributes for all of the series return each data point's name
attribute. Then, for each data point, there are unique dataLabels
attributes to position the label.
To hide the gridlines and labels for the x- and y-axes, I added gridLineWidth: 0
and labels: { enabled: false }
to each.
Here's how the result appears:
A working fiddle with this example can be found at http://jsfiddle.net/brightmatrix/bjrm0cr3/.
Source: stackoverflow.com
Related Query
- Highcharts polar spider with multiple y-axis scale
- Highcharts - multiple plot with the same x scale
- Highcharts - creating chart with same scale axis
- HighCharts Draggable Plotline with Logarithmic axis scale
- Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize
- Highcharts multiple axis gauge with 2 dials with different radii
- Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap
- My Highcharts graph with multiple axis ignores the max value I set for the first yaxis
- How to have multiple highcharts with different series data in vuejs without repeating code
- Highcharts polar spider with Min and Max for each y-axis
- Highcharts : axis with multiple colour
- How can I align the scale on my HighCharts graph with the axis rather than the margins?
- Highcharts multiple axis with custom labels
- Live plot with multiple y axis in highcharts
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Loading multiple Highcharts with jquery.load
- Highcharts - with datetime axis labels overlap
- Highcharts with JSON data and multiple series
- exporting highcharts polar chart to PDF with phantomjs
- highcharts - removing decimal places on Y axis with only one point
- Highcharts - Issue with negative values when displaying multiple axes
- Highcharts | Making multiple y axis scales
- Highcharts blank chart with x and y axis
- Highcharts label format with tickPositioner in a datetime x Axis
- Highchart axis max with multiple axes
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts - Multiple Axis Graph not displaying labels
- Multiple Series Timeline with HighCharts
- How to populate a Highcharts axis with string formatted data from a PHP array
More Query from same tag
- JSON parse or removing double quotation in data getting form model or database in rails
- Remove series from chart when user clicks on legend?
- How to divide the region (city) into sub-regions (sub-cities) on highcharts map
- Exporting png in HighCharts
- How to prevent Highstock from hiding data rows
- Not able to correctly plot x-axis in HighChart
- Include nested entity details but don't group by then when grouping by other fields
- how to use highcharts on ABP.NET angularjs
- Datalabels are not shown in 3D Highcharts bar/column
- How do I line up series points on a compare intervals graph?
- Highchart.js drilldown adding to data dynamicaly without hardcoding.
- Is possible to export programmatically a highcharts chart?
- highcharts exporting - Java approach
- Display time on Xaxis with line chart make by Highcharts
- Highcharts Boxplots How to get five point summary?
- Select which columns from CSV to graph with HighChart
- Highstock: how to define and make the x and y axes visible?
- high charts xAxis label cannot be display after reset zoom
- Highcharts manually setting legendItemClick event
- boxplot catergories don't line up Highcharts
- Resizing Annotation shapes
- Rotating the highchart
- OHLC tooltip getting duplicated to volume chart also in stock chart (highstock)?
- How to set High maps width and height in percentage for responsiveness?
- highcharts tooltip formatter only shows first 8 characters in this.point.name
- Dotnet Highchart Using JSON
- Highcharts area: x-axis in hours but showing multiple points in each hour
- How to set new yAxis data in chart dynamically (highcharts + angular2(4))?
- Is it possible to use custom fonts in Highcharts?
- Hide the First Value Data in Series HighCharts