score:2
Accepted answer
you can define the highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// using classes to select multiple containers
var $containers = $(".container");
// you just set the configuration object once
var chartconfig = {
chart: {
plotbackgroundcolor: null,
plotborderwidth: null,
plotshadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointformat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotoptions: {
pie: {
allowpointselect: true,
cursor: 'pointer',
datalabels: {
enabled: false
},
showinlegend: true
}
},
series: [{
name: 'brands',
colorbypoint: true,
data: [{
name: 'unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// and then for every container init hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartconfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>
Source: stackoverflow.com
Related Query
- how to display 2 same highcharts without duplicate the code
- How do you get a colorByPoint appearance in Highcharts without coloring all the bars in a group the same color?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Highcharts - How to display legend symbol inside the tooltip
- How do I remove the color swatch from my HighCharts legend without affecting the column?
- How can i keep the color the same in highcharts
- How Can I Hide a Pie Chart's Slice in HighCharts Without Removing It From the Legend?
- How to merge two Highcharts container with the same legend-item
- How to re-create the same chart in Highcharts as seen on the mock?
- How can I display the outcome of the for loop in highcharts
- Highcharts how to align two charts yAxis on the same line
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- How can I display crosshair labels on top of the chart with Highcharts
- How can I capture all points belonging to the same series with the same xAxis value without a loop?
- How do I catch a click event on a polygon in HighCharts without having the tooltip popping up
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- same js highcharts display not the same
- How to use a different formatter on Highcharts in each curve of the same graphic?
- How to remove default Hover text and display the custom text title on hover Donut chart Highcharts
- How to have multiple highcharts with different series data in vuejs without repeating code
- How to disable the circle that appears in Highcharts without data?
- How to position the dataLabel for highcharts on the same side of the x-axis?
- Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
- How to render x-axis labels in Highcharts without the decimal points?
- How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?
- How to display multiple values of the same attribute when hovering on tooltip with highcharts/highmaps
- How do I have text display within the inside of a stacked bar graph in highcharts
- How to use highcharts to display data of only five point when the page is initialized?
More Query from same tag
- Rails Memory leak using highChart with a lot of data
- highstock chart only set the max value of xAxis
- Highstocks graph width not correctly rendered
- Stacked highcharts on the same graph, with a new y axis each time?
- How Can I Hide a Pie Chart's Slice in HighCharts Without Removing It From the Legend?
- Highcharts issue when dealing with 3D pie and large labels
- Creating graph on webpage using Highcharts
- how to use hcmap highchart R shiny
- putting category and image in HIGHCHARTS
- How do you set the stack order of the series in a stacked bar chart?
- Merging related timeseries data
- Highcharts - Get and plot data with MySQLi + JSON (step by step)
- Dates not displaying correctly in Highcharts plot with irregular time data
- Is there no way to turn off animation in Highcharts for multiple real-time curves?
- highcharts export png files
- Highcharts: Pie Charts Labels Position
- Highchart line not showing
- Highcharts context menu button appearing thrice for the same chart
- hightcharts: change standard position of tooltip AND shadow (hover)
- How to extend a line series as dotted only when checkbox is clicked?
- highcharter: Fixing x-axis labels in a column chart with only one column
- Can't get events to work on images with Highmaps
- Highcharts - Organizing the raw data
- heroku does not load jquery on https
- Enabling markers for hover doesn't appear to work
- Highcharts Compare Date Ranges Bar Chart
- How to draw line plus bar chart using highcharts/d3.js or any other chart library?
- Link two series object in Highcharts and add event
- Removing/Hiding Null label from x-axis of Chart
- How to update config in HighChart with React hooks?