Highcharts Widget
Integrate interactive Highcharts JS v11 charts into any Odoo form view. Return a configuration dictionary from a Python method and the widget handles all rendering automatically, no custom JavaScript required.
What is Highcharts Widget?
Highcharts Widget bridges Odoo's OWL/QWeb view system and the Highcharts JS charting library. The module bundles Highcharts v11 entirely server-side, with no CDN calls or external dependencies at runtime. A custom Odoo widget component reads a JSON configuration produced by a model method and renders a fully interactive chart inside the form view.
Integration requires two steps: (1) add a method to your model that returns a Highcharts configuration dictionary, and (2) add a <widget> tag to your form view XML pointing to that method. All chart types, export, accessibility, and 3D modules are available with zero additional setup.
Features
All Highcharts Chart Types
Line, spline, pie, variable-pie, bar, 3D charts and more. The full Highcharts v11 library is bundled, no CDN dependency.
No JavaScript Required
Return a Highcharts configuration dictionary from a Python model method. The widget handles all JavaScript rendering automatically.
Multiple Charts Per View
Place as many widget tags as needed in a single form view, each bound to a different model method and record.
Export Support
Built-in Highcharts exporting module allows charts to be saved as PNG, SVG, CSV, or XLS directly from the form view.
Accessibility Module
Highcharts accessibility module is included, making charts compatible with screen readers and assistive technologies.
Full Highcharts Extensions
Includes highcharts-more, highcharts-3d, variable-pie, export-data, and exporting modules: the complete Highcharts feature set.
Highcharts widget rendering a column chart inside an Odoo form view
Integration Guide
Step 1 - Add a method to your model
Create a method that returns a standard Highcharts configuration dictionary. Any valid Highcharts config works here:
# In your Odoo model (e.g. models/my_model.py)
from odoo import api, models
class MyModel(models.Model):
_name = "my_module.my_model"
@api.multi
def compute_sales_chart(self):
self.ensure_one()
return {
"chart": {"type": "column"},
"title": {"text": "Monthly Sales"},
"xAxis": {
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
},
"yAxis": {"title": {"text": "Revenue (USD)"}},
"series": [
{
"name": "2024",
"data": [12000, 15000, 9800, 17200, 21000, 18500]
}
]
}Step 2 - Add the widget tag to your form view
Reference your model and method in the widget XML tag. The id must be unique within the view:
<!-- In your form view XML -->
<record id="view_my_model_form" model="ir.ui.view">
<field name="name">my.model.form</field>
<field name="model">my_module.my_model</field>
<field name="arch" type="xml">
<form string="My Model">
<sheet>
<group>
<field name="name" />
</group>
<!-- Add the Highcharts widget -->
<widget
id="my_model_sales_chart"
model="my_module.my_model"
method="compute_sales_chart"
name="graph_widget"
class="oe_read_only"
/>
</sheet>
</form>
</field>
</record>You can place multiple <widget> tags in the same form view, each bound to a different method. The chart updates when the record is saved or the view is reloaded.
Supported Chart Types
Any chart type supported by Highcharts v11 is available, and the full library is bundled with the module.
Summary
- No JavaScript required - return a Python dictionary, the widget handles all rendering
- Full Highcharts v11 - every chart type, 3D, accessibility, export-data, and exporting modules bundled
- Multiple charts - place any number of widget tags per form view, each with its own data source
- No CDN dependency - Highcharts JS is served from your Odoo instance, no external calls
- Two-step integration - add a Python method + one XML widget tag, chart appears immediately