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
- Load json-data into Highchart
- HighCharts range area plot not working when plot is inverted
- HighStocks Tooltip is not working properly
- Setting Highcharts Series and Category data dynamically
- Get x-axis label into the first colomn of the table - highcharts
- How to get current level on drilldown event in Highcharts treemap?
- Animation behave differently between initial load and dynamic data series replacement in Highcharts
- HighChart timestamp highlight the time now
- Rounded corners in highcharts
- Highcarts with zoomType + default level
- Highcharts: yAxis duration in hours resets every 24h
- Vue highchart how to set language
- Highcharts Error #16: charts not showing on the same page
- Discrete bar with highcharts?
- How can I group different series by different units using rangeSelector?
- Is there a way to disable the Title and Subtitle in Highcharts?
- High charts logarithmic scale?
- How to add hyperlink to each part of high-chart's stacked bar chart in php
- Clickable semi circle chart configuration issue
- Highstock chart - JSON input not working
- Drop down integration with bubble chart
- Error 17 in highcharts : Highcharts-more js file is not loaded
- highcharts-vue xAxis.tickPositioner with series.data.length == 0
- Highcharts unevenly spaced x-axis with category labels
- Highcharts stacked bar negative / positive total
- how to get additional information by clicking a data point on bubble chart from data
- Prepare my data for HighStocks data series input
- DataGrouping not working on highcharts angular
- how to hide highchart x - axis data values
- Highcharts grouped bar charts with multiple axes