I have a simple bar chart that I overlayed with a line. The bars and the lines are generated from different data, so the chart is skewing the size of the bars because the line data is significantly larger than the bars data. I want to have a separate y-axis for the lines on the right side of the chart to prevent this, but I can't find any documentation for go-echarts on how to do this.

Here is an image of what the chart currently looks like. As you can see the bars are almost imperceptible.

Below is my code. The line is added towards the bottom of the code. Does anyone know how do add a y-axis on the right side for the line?

// Sort the dates so that the x-axis is ordered.
    var dates []string
    for date := range data {
        dates = append(dates, date)
    }
    sort.Strings(dates)

    // Build series data for the bars (profit) and line (transaction count).
    var barData []opts.BarData
    for _, date := range dates {
        stat := data[date]
        barData = append(barData, opts.BarData{Value: stat.Profit})
    }

    // Create the bar chart for profit.
    bar := charts.NewBar()
    bar.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{
            Title:    "Daily Profit",
            Subtitle: "Profit in USDT",
        }),
        charts.WithLegendOpts(opts.Legend{
            Show: opts.Bool(false),
        }),
        charts.WithDataZoomOpts(opts.DataZoom{
            Type:  "slider",
            Start: 50,
            End:   100,
        }),
        // First y-axis (index 0) for Profit USDT; no explicit index needed.
        charts.WithYAxisOpts(
            opts.YAxis{
                Type: "value",
            },
        ),
    )
    bar.SetXAxis(dates).AddSeries("Profit USDT", barData)

    // Build series data for the bars (profit) and line (transaction count).
    var lineData []opts.LineData
    for _, date := range dates {
        stat := data[date]
        lineData = append(lineData, opts.LineData{Value: stat.Count, YAxisIndex: 1})
    }

    // Create the bar chart for profit.
    line := charts.NewLine()
    line.SetXAxis(dates).
        AddSeries("Transaction Count", lineData)
    line.SetGlobalOptions(
        // First y-axis (index 0) for Profit USDT; no explicit index needed.
        charts.WithYAxisOpts(
            opts.YAxis{
                Type: "value",
                Position: "right",
            },
        ),
    )
    line.ExtendYAxis(opts.YAxis{Type: "value", Position: "right", Show: opts.Bool(true)})
    
    bar.Overlap(line)

    return bar

I have a simple bar chart that I overlayed with a line. The bars and the lines are generated from different data, so the chart is skewing the size of the bars because the line data is significantly larger than the bars data. I want to have a separate y-axis for the lines on the right side of the chart to prevent this, but I can't find any documentation for go-echarts on how to do this.

Here is an image of what the chart currently looks like. As you can see the bars are almost imperceptible.

Below is my code. The line is added towards the bottom of the code. Does anyone know how do add a y-axis on the right side for the line?

// Sort the dates so that the x-axis is ordered.
    var dates []string
    for date := range data {
        dates = append(dates, date)
    }
    sort.Strings(dates)

    // Build series data for the bars (profit) and line (transaction count).
    var barData []opts.BarData
    for _, date := range dates {
        stat := data[date]
        barData = append(barData, opts.BarData{Value: stat.Profit})
    }

    // Create the bar chart for profit.
    bar := charts.NewBar()
    bar.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{
            Title:    "Daily Profit",
            Subtitle: "Profit in USDT",
        }),
        charts.WithLegendOpts(opts.Legend{
            Show: opts.Bool(false),
        }),
        charts.WithDataZoomOpts(opts.DataZoom{
            Type:  "slider",
            Start: 50,
            End:   100,
        }),
        // First y-axis (index 0) for Profit USDT; no explicit index needed.
        charts.WithYAxisOpts(
            opts.YAxis{
                Type: "value",
            },
        ),
    )
    bar.SetXAxis(dates).AddSeries("Profit USDT", barData)

    // Build series data for the bars (profit) and line (transaction count).
    var lineData []opts.LineData
    for _, date := range dates {
        stat := data[date]
        lineData = append(lineData, opts.LineData{Value: stat.Count, YAxisIndex: 1})
    }

    // Create the bar chart for profit.
    line := charts.NewLine()
    line.SetXAxis(dates).
        AddSeries("Transaction Count", lineData)
    line.SetGlobalOptions(
        // First y-axis (index 0) for Profit USDT; no explicit index needed.
        charts.WithYAxisOpts(
            opts.YAxis{
                Type: "value",
                Position: "right",
            },
        ),
    )
    line.ExtendYAxis(opts.YAxis{Type: "value", Position: "right", Show: opts.Bool(true)})
    
    bar.Overlap(line)

    return bar

• go
• echarts

Share Improve this question Follow asked Mar 22 at 14:06 MasterShake20MasterShake20 11711 gold badge33 silver badges1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You just need to add 2 Y-axes and indicate options for categories. I modified the code from the official example code for that:

package main

import (
    "math/rand"
    "os"

    "github/go-echarts/go-echarts/v2/charts"
    "github/go-echarts/go-echarts/v2/opts"
)

func generateBarItems() []opts.BarData {
    items := make([]opts.BarData, 0)
    for i := 0; i < 7; i++ {
        items = append(items, opts.BarData{Value: rand.Intn(300)})
    }
    return items
}

func generateBarItemsBig() []opts.BarData {
    items := make([]opts.BarData, 0)
    for i := 0; i < 7; i++ {
        items = append(items, opts.BarData{Value: rand.Intn(300) + 1000})
    }
    return items
}

func main() {

    // create a new bar instance
    bar := charts.NewBar()
    // set some global options like Title/Legend/ToolTip or anything else
    bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
        Title:    "My first bar chart generated by go-echarts",
        Subtitle: "It's extremely easy to use, right?",
    }))

    // Put data into instance
    bar.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
        AddSeries("Category A", generateBarItems(), charts.WithBarChartOpts(opts.BarChart{
            YAxisIndex: 0,
        })).
        AddSeries("Category B", generateBarItemsBig(), charts.WithBarChartOpts(opts.BarChart{
            YAxisIndex: 1,
        }))
    bar.YAxisList = []opts.YAxis{
        opts.YAxis{
            Type: "value",
            Name: "small",
        },
        opts.YAxis{
            Type: "value",
            Name: "big",
        },
    }
    // Where the magic happens
    f, _ := os.Create("bar.html")
    bar.Render(f)
}