Flutter Charts - coloring and adding axis on a line chart

Question

I'm currently trying to restyle a design layout. I got most of it through try and error. The only part which I can't figure out are:

1.) The black axis on the left and bottom. So that only those are black 2.) The light grey axis inside. How can I apply opacity on the color or use my own color? I can only use charts.MaterialPalette and I can't figure out how to define my own. 3.) Also how to add the light grey axis in the middle. I only got the vertical ones. 4.) Is there a way to add a corner radius for the lines?

This is what it looks like right now:

This is what I want to achieve:

Here's my code so far:

/// Example of a line chart rendered with dash patterns.
class DashPatternLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  DashPatternLineChart(this.seriesList, {this.animate});

  /// Creates a [LineChart] with sample data and no transition.
  factory DashPatternLineChart.withSampleData() {
    return new DashPatternLineChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }


  @override
  Widget build(BuildContext context) {
    return new charts.LineChart(seriesList,
        animate: animate,
        layoutConfig: charts.LayoutConfig(
            leftMarginSpec: charts.MarginSpec.fixedPixel(0),
            topMarginSpec: charts.MarginSpec.fixedPixel(75),
            rightMarginSpec: charts.MarginSpec.fixedPixel(0),
            bottomMarginSpec: charts.MarginSpec.fixedPixel(175)
        ),
        flipVerticalAxis: false,
        defaultInteractions: false,
        domainAxis: new charts.NumericAxisSpec(
            renderSpec: charts.GridlineRendererSpec(
                lineStyle: charts.LineStyleSpec(
                  color: charts.MaterialPalette.white,
                  thickness: 1,
                )
            ),
            tickProviderSpec: new charts.StaticNumericTickProviderSpec(
              // Create the ticks to be used the domain axis.
              <charts.TickSpec<num>>[
                new charts.TickSpec(0, label: '0', style: charts.TextStyleSpec(fontSize: 14)),
                new charts.TickSpec(50, label: '50', style: charts.TextStyleSpec(fontSize: 14)),
                new charts.TickSpec(100, label: '100', style: charts.TextStyleSpec(fontSize: 14)),
              ],
            )),
        primaryMeasureAxis: new charts.NumericAxisSpec(
            renderSpec: charts.GridlineRendererSpec(
                labelOffsetFromAxisPx: -20,
                labelAnchor: charts.TickLabelAnchor.after,
                lineStyle: charts.LineStyleSpec(
                  color: charts.MaterialPalette.transparent,
                  thickness: 0,
                )
            ),
            tickProviderSpec: new charts.StaticNumericTickProviderSpec(
              // Create the ticks to be used the domain axis.
              <charts.TickSpec<num>>[
                new charts.TickSpec(100, label: '100%', style: charts.TextStyleSpec(fontSize: 14)),
              ],
            )
        ));
  }

  /// Create three series with sample hard coded data.
  /// Create three series with sample hard coded data.
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final myFakeDesktopData = [
      new LinearSales(0, 100),
      new LinearSales(25, 85),
      new LinearSales(30, 80),
      new LinearSales(45, 60),
      new LinearSales(30, 40),
      new LinearSales(25, 20),
      new LinearSales(0, 0),
    ];

    return [
      new charts.Series<LinearSales, int>(
        id: 'Desktop',
        colorFn: (_, __) => charts.MaterialPalette.white,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        domainUpperBoundFn: (LinearSales sales, _) => sales.domainUpper,
        domainLowerBoundFn: (LinearSales sales, _) => sales.domainLower,
        measureUpperBoundFn: (LinearSales sales, _) => sales.measureUpper,
        measureLowerBoundFn: (LinearSales sales, _) => sales.measureLower,
        strokeWidthPxFn: (_, __) => 4,
        data: myFakeDesktopData,
      )
    ];
  }
}

/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

  final int domainUpper = 100;
  final int domainLower = 0;

  final int measureUpper = 100;
  final int measureLower = 0;

  LinearSales(this.year, this.sales);
}

Answer 1

I don't have an answer for all your questions, but I was able to supply my own colors this way:

charts.Color.fromHex(code: "#ff0000")

or semitransparent like this:

charts.Color(r: 255, g: 0, b: 0, a: 128)