score:4
looking at the complete git repo, the index.css file was not being imported in the index.js file, hence not being able to reference the css commands. the solution is, in the index.js file, add:
import './index.css';
to the top of the code. then in the index.css file, add:
.highcharts-container {
margin: 0 auto;
}
and this will centre the enter highcharts div.
score:0
add this field in your js function
legend: {
backgroundcolor: '#f5f5f5',
layout: 'horizontal',
floating: true,
align: 'center',
verticalalign: 'top'
}
score:1
center it in the div
tag. just add align="center"
to the div
and that should do it. here is your updated fiddle
Source: stackoverflow.com
Related Query
- How to center highcharts pie chart and legend on a page?
- Highcharts Pie chart how to reduce space between chart and legend caused by plot width
- How do you add text to the bottom center of legend and bottom center of chart under legend?
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Highcharts connecting scatter chart and pie chart with single legend
- How to center chart title position dynamically inside pie chart in highcharts
- Show tootip and select pie slice on legend click of pie chart in HighCharts
- canvg and highcharts how to include chart legend and keep the chart size?
- Highstock And Highcharts: How I use StockChart and pie chart on the same page
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- How to remove fine white line between halo and Highcharts pie chart
- How do I enlarge the pie chart and shift to the center
- Highcharts - How to combine unique legend for multi-series pie chart which perform same action for both series? (like onclick: show/hide)
- how to show legend in PIE chart from chart to pie drilldown highcharts
- How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
- how to enable only 1 out of 2 column column graph by default when page loads in highcharts and the 2nd one gets visible when toggled in the legend
- How to change Highcharts 3D Pie Chart Label and Tooltip Style?
- How can I maintain the Highcharts halo effect on pie chart after click and mouseOut?
- How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?
- How to create a column range chart in Highcharts using range and navigator functions?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Place text in center of pie chart - Highcharts
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Highcharts - labels inside and outside a pie chart
- How do you increase the performance of highcharts chart creation and rendering
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- how to make highcharts pie datalabels always in center of each slice?
- How to add space between chart and axis in highcharts
- Highcharts - How can I remove starting and ending padding from area chart
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
More Query from same tag
- highchart axis label can't set at beginning of the label?
- Highcharts loading data and not plotting
- Highcharts Polar, edit onmouseover label
- Exporting Highchart Live Data to Table
- Unit test for Highcharts tooltip in Angular
- Highcharts multi line graphs
- Highcharts show the same yAxis start and end value with multiple data series
- Highcharts: Tooltip on Y-Axis Labels
- highchart axis position with negative values
- Too many x values in High Charts. How to wrap it up for mobile devices
- Highcharts Reflow Heavy Chart Lagging
- How to change color of line above or below specify curve line in Highcharts?
- HIghcharts - chart width not the size of the parent container
- MeanJS Application Fails to Instantiate AngularJS Module After Being Pushed
- TypeError: Cannot read properties of null (reading '0')
- In Highcharts can legends be shown as dropdown or option of select all deselect all legends?
- Highcharts dual yaxis scaling issue
- Passing data from Javascript MVC controller
- YQL finance data JSON format for use with highcharts
- highcharts line-ajax example/demo
- Correction chart view with Highcharts
- Highchart Pie chart, de-structure dataLabels and define custom formatter
- How to change tool tip using High Charts
- AngularJs choose charts framework d3.js vs highcharts
- Responsive behaviour for ng-highcharts with compiled ng-click on xAxis labels hidden on load
- Tooltip on custom button in Highcharts
- Turning off point markers does not appear to work for Highcharts-ng
- JavaScript line and area chart with similar interface as shown
- Highcharts date off by one day
- highcharts: the way to call afterPrint