Search code examples
odooodoo-14odoo-15

change bar chart column color in odoo

I have the task of changing colors in graph -> bar chart columns. By default they are blue. But I want to change it. What should I do? Customize odoo/addons/web/static/src/views/graph/graph_renderer.js ? I should write down a custom widget(owl component)?

Solution

  • The graph colors are set in the graph renderer. For example for the bar chart, odoo get the color from colors.js using the loop index of the dataset.

    In the following example, we define a new graph view with custom renderer:

    graph_renderer.js

    /** @odoo-module **/

import { GraphRenderer } from "@web/views/graph/graph_renderer";


export class CustomGraphRenderer extends GraphRenderer {
    
}

    graph_view.js

    /** @odoo-module **/

import { GraphView } from "@web/views/graph/graph_view";
import { CustomGraphRenderer } from "./graph_renderer";
import { registry } from "@web/core/registry";


class CustomGraphView extends GraphView {}
CustomGraphView.components.Renderer = CustomGraphRenderer;

registry.category("views").add("custom_graph", CustomGraphView);

    You need to add the above files to the assets entry under web.assets_backend

    To use the new graph view, use the js_class attribute of the graph view:

    <graph js_class="custom_graph">